jquery視差推薦:nikebetterworld視差平滑滾動效果


讓多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。這就是視差滾動技術,作為今年網頁設計的熱點趨勢,越來越多的網站應用了這項技術。上次,我創建了一個jQuery的垂直視差演示,操縱CSS在不同的速度,相對的移動滾動條移動多個背景。 著名的耐克公司Nikebetterworld就是采用這樣技術實現的;今天采用jquery視差腳本,重新建立一個類似Nikebetterworld網頁,效果演示

 

Demo    

先來看看這樣效果在網站當中的運用

 Dennis Kleine

HSWI31

32. Maid Stone Driving Lessons

HSWI32

 Benjamin Chirlin

HSWI33

Sockho

HSWI34

 Farm House Fare

HSWI35

 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>

要達到我們想要的效果,需要使用的腳本文件是:

 

頁面包含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();
});

最后是滾動事件,當用戶滾動的時候通過他來移動滾動條的位置,最終效果,如果想要源碼,請留下你的郵箱

Demo    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM