讓多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。這就是視差滾動技術,作為今年網頁設計的熱點趨勢,越來越多的網站應用了這項技術。上次,我創建了一個jQuery的垂直視差演示,操縱CSS在不同的速度,相對的移動滾動條移動多個背景。 著名的耐克公司Nikebetterworld就是采用這樣技術實現的;今天采用jquery視差腳本,重新建立一個類似Nikebetterworld網頁,效果演示
Demo
先來看看這樣效果在網站當中的運用
Dennis Kleine
32. Maid Stone Driving Lessons
Benjamin Chirlin
Sockho
Farm House Fare
HTML代碼
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="scripts/nbw-parallax.js"></script> <script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script> <script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="scripts/jquery.inview.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#nav').localScroll(); }) </script>
要達到我們想要的效果,需要使用的腳本文件是:
- jQuery 1.4.4
- jQuery localscroll (文章之間順差滾動插件)
- jQuery scrollTo (最主要的平滑滾動)
- jQuery Inview (判斷一篇文章是否在瀏覽)
頁面包含6個部分,頭部 ,尾部,然后分別定義4個DIV放置滾動的文章,在頁面的右邊創建一個無序的ul列表,他不會移動,通過它來控制文章的上下移動,效果圖
右邊UL代碼如下
1 <ul id="nav"> 2 <li><a href="#intro" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> 3 <li><a href="#second" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> 4 <li><a href="#third" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> 5 <li><a href="#fourth" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> 6 <li><a href="#fifth" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> 7 </ul>
這些li元素創建了錨鏈接,當用戶點擊的時候鏈接到節點,這里並沒有使用jquery,所以點擊的時候速度會很快,給用戶的體驗不好,所以這里需要實現平滑滾動(稍候再說),來展示我們的視覺效果;
<div id="intro"> <div class="story"> Article content here </div> <!--.story--> </div> <!--#intro-->
這段代碼是正文部分,我們的內容就放在這里面,其他的只需要吧<div id="intro">換掉就可以
部分頁面效果如下
Demo
The CSS
1 #intro{ 2 background:url(images/firstBG.jpg) 50% 0 no-repeat fixed; 3 color: white; 4 height: 600px; 5 margin: 0; 6 padding: 160px 0 0 0; 7 }
定義第一個div css代碼,以50%的固定背景圖片,高度設置成600,這里寬度並沒有定義,讓他是100%,以適應不同的屏幕;
1 .story{ 2 margin: 0 auto; 3 min-width: 980px; 4 width: 980px; 5 }
正文內容是980的寬度;
多重背景的問題
有些文章有多個背景.,我們需要額外的定義html代碼來實現多重背景;這里額外定義一個bg的class類;
<div id="second"> <div class="story"> <div class="bg"></div> Article content here </div> <!--.story--> </div> <!--#second-->
定義bg的樣式代碼
#second .bg{ background: url(images/trainers.png) 50% 0 no-repeat fixed; ... position: absolute; ... z-index: 200; }
注意:為了確保他的背景在最前面需要定義一個position: absolute的絕對定位和z-index:屬性;來遮蓋其他的背景,這就是多重背景的實現;
The jQuery
好了,為了實現平滑滾動,我需要寫jquery代碼突出視差效果
1 var $window = $(window); 2 var $firstBG = $('#intro'); 3 var $secondBG = $('#second'); 4 var $thirdBG = $('#third'); 5 var $fourthBG = $('#fourth'); 6 var trainers = $("#second .bg");
這里獲取每個鏈接的對象;
我們需要瀏覽器窗口的高度,代碼如下
var windowHeight = $window.height();
接下來,使用接下來inview'事件;
1 $('#intro, #second, #third, #fourth').bind('inview', function (event, visible) { 2 if (visible == true) { 3 $(this).addClass("inview"); 4 }else{ 5 $(this).removeClass("inview"); 6 } 7 });
代碼解釋:點擊其中的任何一個鏈接,獲取當前的容器文章,如果是可見的,給他增加inview類;
1 function RepositionNav(){ 2 var windowHeight = $window.height(); 3 var navHeight = $('#nav').height() / 2; 4 var windowCenter = (windowHeight / 2); 5 var newtop = windowCenter - navHeight; 6 $('#nav').css({"top": newtop}); 7 }
我希望li列表在瀏覽器窗口的中心始終保持垂直。上面的代碼高度除以2,找到它的中心。然后中心窗口以同樣的方式,最后把兩個數一減掉就是新的中心固定位置;
1 function Move(){ 2 var pos = $window.scrollTop(); 3 ... 4 }
接下來是一個窗口resize事件:
$window.resize(function(){ Move(); RepositionNav(); });
當用戶調整瀏覽器,調用Move()函數和RepositionNav()函數來確保平滑效果
$window.bind('scroll', function(){ Move(); });
最后是滾動事件,當用戶滾動的時候通過他來移動滾動條的位置,最終效果,如果想要源碼,請留下你的郵箱