製作網頁畫面捲動不同步效果

208949_4230890500314_135407198_n
點上圖可以看效果。

最近國外網站流行這種,當我們滾動捲軸時,背景的圖片不同步捲動的效果,稍微思考一下,其實也不會很難做,剛好看到有篇文章介紹,就自己也實作一個,其實也是最近剛好有需要用到。

簡單的說我們需要幾個div,讓他的position設為fixed,到時在根據捲動scrollbar距離去改變每個div的top的高度就可以了。

他這邊是使用一個基準div去讓其他的div去變化位置,也可以使用一個會隨scrollbar位置變化的參數去設定每個div的位置。

這邊是CSS
  1. .figure{   
  2.     width:500px;   
  3.     height:500px;   
  4.     position:fixed;   
  5. }   
  6. #f1{   
  7.     background:url(01.png);   
  8.     left:0;   
  9.     top:280px;   
  10. }   
  11. #f2{   
  12.     background:url(02.png);   
  13.     left:200px;   
  14.     top:0px;   
  15. }   
  16. #f3{   
  17.     background:url(03.png);   
  18.     right:0px;   
  19.     top:50px;   
  20. }   
  21. #f4{   
  22.     background:url(04.png);   
  23.     right:200px;   
  24.     top:160px;   
  25. }  

之後再參考以下的js就可以了。
  1. var h1 = $("#f1").offset().top;   
  2. var h2 = $("#f2").offset().top;   
  3. var h3 = $("#f3").offset().top;   
  4. var h4 = $("#f4").offset().top;   
  5.        
  6. $(window).scroll(function(){   
  7.     var a = $(window).scrollTop();   
  8.     var y = $("#f0").offset().top;   
  9.     var p = a/(y-a);   
  10.     var pp1 =h1-6*p+"px";   
  11.     $("#f1").css({"top":pp1});   
  12.       
  13.     var pp2 =h2-8*p+"px";   
  14.     $("#f2").css({"top":pp2});   
  15.       
  16.     var pp3 =h3-4*p+"px";   
  17.     $("#f3").css({"top":pp3});   
  18.       
  19.     var pp4 =h4-2*p+"px";   
  20.     $("#f4").css({"top":pp4});   
  21. });  

其實之前有找到一個plugin,有興趣也可以試試看。
Stellar.js

留言