視差滾動原理及實現

作為一種優雅酷炫的頁面展示的方式，視差滾動（Parallax Scrolling）正受到越來越多前端設計師的寵愛，優設的2014年網頁設計趨勢中依然能夠看到它的影子，所以我們不得不來好好研究下視差滾動的原理和實現方式。

1.視差滾動

視差滾動（Parallax Scrolling）指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術。國內外的設計師們實現了很多酷炫的效果，大家請移步欣賞，《14個超棒的帶有故事趣味性視差滾動網站》、《17 Inspiring Examples of Parallax Scrolling Sites》、《18 Beautiful Examples of Parallax Scrolling in Web Design》。

2.特性視差滾動效果酷炫，適合於個性展示的場合。視差滾動徐徐展開，適合於娓娓道來，講故事的場合。視差滾動容易迷航，需要具備較強的導航功能。3.原理傳統的網頁的文字、圖片、背景都是一起按照相同方向相同速度滾動的，而視差滾動則是在滾動的時候，內容和多層次的背景實現或不同速度，或不同方向的運動。
有的時候也可以加上一些透明度、大小的動畫來最佳化顯示。4.實現4.1簡單實現利用background-attachment屬性實現。 background-attachment: fixed || scroll || local
預設情況下，此屬性取值scroll，頁面滾動時，內容和背景一起運動，如果取值fixed，背景相對瀏覽器固定。借用Alloy Team的博文《視差滾動的愛情故事》的圖片和背景，來看看效果。

<div class="article section1">     每當我加班淩晨，獨自一人走在黑暗的回家路上</div><div class="article section2">     我會想起那天夕陽下的奔跑</div><div class="article section3">     那是我逝去的，青春</div>

css非常簡單，

/*統一設定背景的background-attchment屬性*/.article{width: 960px;margin: 0 auto;height: 800px;padding: 40px;font: 24px/1.5 'Microsoft YaHei';background-repeat: no-repeat;background-attachment: fixed;background-position: center center;background-size: cover;line-height:400px;}/*分別給每個部分設定不同的背景和顏色*/.section1{       color: white;       background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg);}.section2{       color: #FF8500;       background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg);}.section3{       color: #747474;       background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg);}

4.2 加上動畫上面的效果略顯呆板，我們在頁面滾動的時候，給文字加點動畫，看效果。我們來偵聽一下scroll事件，當頁面滾動某個地方時()，我們給元素添加動畫。

var articleHeight =800;var section1 = document.getElementById('section1'),section2 = document.getElementById('section2'),section3 = document.getElementById('section3');window.addEventListener('scroll',scrollHandler);function scrollHandler(e){var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;if(scrollTop > 0 && scrollTop < articleHeight){section1.classList.add('anim');}else if(scrollTop >= articleHeight && scrollTop < articleHeight*2){section2.classList.add('anim');}else if(scrollTop >= articleHeight*2 && scrollTop < articleHeight*3){section3.classList.add('anim');}}

html和css也要進行一些修改

/*統一設定背景的background-attchment屬性*/.article{width: 960px;margin: 0 auto;height: 800px;padding: 40px;background-repeat: no-repeat;background-attachment: fixed;background-position: center center;background-size: cover;        font: 24px/1.5 'Microsoft YaHei';        line-height:400px;         text-indent:-25em;}/*分別給每個部分設定不同的背景和顏色*/.section1{        color: white;        background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg);}.section2{         color: #FF8500;        background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg);}.section3{         color: #747474;        background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg);}.anim{       -webkit-transition : all 1s ease-in;       -moz-transition : all 1s ease-in;       -ms-transition : all 1s ease-in;       transition : all 1s ease-in;       text-indent:3em;}

4.3 背景運動剛剛兩個情況只是背景保持fixed的狀態，我們可以給包括背景在內的多層次元素添加運動，從而實現視差滾動。多背景時，需要確保上面的背景是透明的。看看nettuts上的一個效果，研究研究，看看實現過程。

html檔案裡面使用了data-speed和data-type向js裡傳遞參數。

<!-- Section #1 --><section id="home" data-speed="10" data-type="background">  <article>I am Absolute Positioned</article></section><!-- Section #2 --><section id="about" data-speed="4" data-type="background">  <article>Simple Parallax Scroll</article></section>

CSS檔案，

#home {    background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/home.jpg) 50% 0 no-repeat fixed;    height: 1000px;    margin: 0 auto;    width: 100%;    max-width: 1920px;    position: relative;    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);}#about {    background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/about.jpg) 50% 0 no-repeat fixed;    height: 1000px;    margin: 0 auto;    width: 100%;    max-width: 1920px;    position: relative;    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);}/* Introduction */ #home article {    background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/intro.png") no-repeat scroll center top transparent;    height: 458px;    position: absolute;    text-indent: -9999px;    top: 291px;    width: 100%;}#about article {    background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/parallax.png") no-repeat scroll center top transparent;    height: 458px;    position: absolute;    text-indent: -9999px;    top: 291px;    width: 100%;}

javascript，這裡用到了jquery

$(document).ready(function () {    // Cache the Window object    $window = $(window);     $('section[data-type="background"]').each(function () {        var $bgobj = $(this); // assigning the object         $(window).scroll(function () {             // Scroll the background at var speed            // the yPos is a negative value because we're scrolling it UP!                                          var yPos = -($window.scrollTop() / $bgobj.data('speed'));             // Put together our final background position            var coords = '50% ' + yPos + 'px';             // Move the background            $bgobj.css({                backgroundPosition: coords;            });        }); // window scroll Ends    });});

5.教程、外掛程式、欣賞請大家參閱一下資源懶人素材的《如何構建一個視差滾動網站HTML5》Alloy Team的《視差滾動的愛情故事》RIA Coder的《Edge Animate十分鐘零代碼實現HTML5視差滾動效果》codrops的《PARALLAX SLIDER WITH JQUERY》《16個最棒的jQuery視差滾動效果教程》
優設《讓網頁舞動起來！25個免費的視差滾動外掛程式》W3Cplus《10個優秀視差滾動外掛程式》
設計達人《30+漂亮的視差滾動網頁設計欣賞》W3Cfun《帶給你完美體驗的23個視差滾動外掛程式》本部落格的另一篇文章《18佳使滾動技術更上層樓的網站》完工！感謝閱讀，希望可以為您帶來些許協助！---------------------------------------------------------------

前端開發whqet，關注web前端開發技術，分享網頁相關資源。
---------------------------------------------------------------