Pages

0

練習 - 背景不同步移動特效


點選上面這張圖片就可以看到效果~

這是偶然間發現的一個很酷的效果
通常網頁捲軸下拉的時候
頁面上的東西不是固定不動，就是所有一起往上移動
這個效果主要就是造成物件不同步的移動
而產生帶有透視感與立體感的背景特效~
其實程式碼不難
重點還是在如何讓頁面上的東西不同步的觀念
這個觀念就是運用 CSS 當中 position:fixed 屬性
以及判斷 scrollbar 拉動的距離 (利用 scrollTop)
接著利用類似等比級數的概念
就可以輕鬆達到頁面上每個東西該如何移動或該用何種速度移動了

同樣的原理不僅僅用在 div 的 position 上
還可以用在 background 中的 image 位置上
差別在於 background 有自身的 div 可做為計算比例的基準
若是要用在 div 的 position 上
就必須要建立一個帶有 fixed 屬性的 div 做為基準
也就是我程式裡頭的 div0
如此一來就可以輕鬆的製做出不同步的效果囉

這是CSS
#div1{width:500px; height:500px; background:url(img/20120530_01.png) 0 0 no-repeat; position:fixed; z-index:4; top:100px; left:200px; display:none;}
#div2{width:320px; height:35px; background:url(img/20120530_02.png) 0 0 no-repeat; position:fixed; z-index:3; top:600px; left:280px; display:none;}
#div3{width:828px; height:263px; background:url(img/20120530_03.png) 0 0 no-repeat; position:fixed; z-index:2; top:200px; left:30px; display:none;}
#div4{width:850px; height:341px; background:url(img/20120530_04.png) 0 0 no-repeat; position:fixed; z-index:1; top:140px; left:30px; display:none;}

這是JQuery
var h1 = $("#div1").offset().top; 
var h2 = $("#div2").offset().top; 
var h3 = $("#div3").offset().top;
var h4 = $("#div4").offset().top;
$(window).scroll(function(){
   var a = $(window).scrollTop();
   var y = $("#div0").offset().top;//定位用的div，但如果採用背景移動的方式，則不需要
  
   var p1 = a/(Math.abs(y-a));//計算出一個比例
   var pp1 =h1-6*p1;//計算每次拉動跑動的距離
   $("#div1").css({"top":pp1+"px"});
  
   var p2 = a/(Math.abs(y-a));
   var pp2 =h2-6.5*p2;
   $("#div2").css({"top":pp2+"px"}); 
  
   var p3 = a/(Math.abs(y-a));
   var pp3 =h3-4*p3;
   $("#div3").css({"top":pp3+"px"});
  
   var p4 = a/(Math.abs(y-a));
   var pp4 =h4-2*p4;
   $("#div4").css({"top":pp4+"px"});
  
});

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言