jquery視差推薦：nikebetterworld視差平滑滾動效果[轉(zhuǎn)]

1、jquery視差推薦：nikebetterworld視差平滑滾動效果轉(zhuǎn)  讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。這就是視差滾動技術(shù)，作為今年網(wǎng)頁設(shè)計的熱點趨勢，越來越多的網(wǎng)站應(yīng)用了這項技術(shù)。上次，我創(chuàng)建了一個jQuery的垂直視差演示，操縱CSS在不同的速度，相對的移動滾動條移動多個背景。 著名的耐克公司Nikebetterworld就是采用這樣技術(shù)實現(xiàn)的；今天采用jquery視差腳本，重新建立一個類似Nikebetterworld網(wǎng)頁,效果演示Demo 先來看看這樣效果在網(wǎng)站當中的運用 Dennis Kleine32.

2、 Maid Stone Driving Lessons Benjamin ChirlinSockho Farm House Fare HTML代碼<script type="text/javascript" src="<script type="text/javascript" src="<script type="text/javascript" src="<script type="text/javascript" s

3、rc="<script type="text/javascript" src="<script type="text/javascript">$(document).ready(function() $('#nav').localScroll();)</script>要達到我們想要的效果，需要使用的腳本文件是:· jQuery 1.4.4· jQuery localscroll (文章之間順差滾動插件)· jQuery scrollTo (

4、最主要的平滑滾動)· jQuery Inview (判斷一篇文章是否在瀏覽)頁面包含6個部分，頭部 ，尾部，然后分別定義4個DIV放置滾動的文章，在頁面的右邊創(chuàng)建一個無序的ul列表，他不會移動，通過它來控制文章的上下移動，效果圖右邊UL代碼如下1 <ul id="nav">2 <li><a href=" title="Next Section"><img src=" alt="Link" /></a></li>3 <l

5、i><a href=" title="Next Section"><img src=" alt="Link" /></a></li>4 <li><a href=" title="Next Section"><img src=" alt="Link" /></a></li>5 <li><a href=" title="Next

6、Section"><img src=" alt="Link" /></a></li>6 <li><a href=" title="Next Section"><img src=" alt="Link" /></a></li>7 </ul>這些li元素創(chuàng)建了錨鏈接，當用戶點擊的時候鏈接到節(jié)點，這里并沒有使用jquery，所以點擊的時候速度會很快，給用戶的體驗不好，所以這里需要實現(xiàn)平滑滾

7、動(稍候再說)，來展示我們的視覺效果；<div id="intro"> <div> Article content here </div> <!-.story-></div> <!-#intro->這段代碼是正文部分，我們的內(nèi)容就放在這里面，其他的只需要吧<div id="intro">換掉就可以部分頁面效果如下Demo The CSS1 #intro2 background:url(images/firstBG.jpg) 50% 0 no-repeat fix

8、ed;3 color: white;4 height: 600px;5 margin: 0;6 padding: 160px 0 0 0;7 定義第一個div css代碼，以50%的固定背景圖片，高度設(shè)置成600，這里寬度并沒有定義，讓他是100%，以適應(yīng)不同的屏幕；1 .story2 margin: 0 auto;3 min-width: 980px;4 width: 980px;5 正文內(nèi)容是980的寬度；多重背景的問題有些文章有多個背景.，我們需要額外的定義html代碼來實現(xiàn)多重背景；這里額外定義一個bg的class類；<div id="second">

9、<div> <div></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:屬性；來遮蓋其他的背景

10、，這就是多重背景的實現(xiàn)；The jQuery好了，為了實現(xiàn)平滑滾動，我需要寫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");這里獲取每個鏈接的對象；我們需要瀏覽器窗口的高度，代

11、碼如下var windowHeight = $window.height();接下來，使用接下來inview'事件；1 $('#intro, #second, #third, #fourth').bind('inview', function (event, visible) 2 if (visible = true) 3 $(this).addClass("inview");4 else5 $(this).removeClass("inview");6 7 );代碼解釋：點擊其中的任何一個鏈接，獲取當前的容器文章

12、，如果是可見的，給他增加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，找到它的中心。然后中心窗口以同樣的方式,最后把兩個數(shù)一減掉就是新的中心固定位置；1 function Move()2 var pos = $window.scrollTop();3 .4 接下來是一個窗口resize事件：$window.resize(func