轉載請注明出處： 猩猩隊長?http://www.cnblogs.com/wayns/p/parallax_study_page_scroll.html

視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為2014年網頁設計的熱點趨勢，越來越多的網站應用了這項技術。2014年網頁設計十大熱門趨勢

這里有一些在awwwards上獲獎的作品：http://www.awwwards.com/websites/parallax/

學習資料：http://www.alloyteam.com/2014/01/parallax-scrolling-love-story/

看了很多滾動視差的作品，我被它的驚艷給折服了，以至于我自己也想嘗試做一個玩玩。

在我自己心里設計的滾動視差作品呢，我想要做的是整屏滾動的那種，滾一下就整個頁面切換，再開始下一個頁面的視差動作。（大致是醬紫，感覺自己說得亂七八糟的）

我覺得這是一篇關于整屏滾動的文章，好像與滾動視差沒半毛錢關系。說白了也就是自己練練手，順便分享給大家，呵呵！

首先說說滾動屏幕，使用JS滾動屏幕有好幾種實現方式，小弟不才，也就介紹2種，希望有更多方法的朋友可以回復我讓我記錄積累，謝謝。

1 window.scroll(x,y);//頁面滾動到坐標（x,y）
2 
3 document.body.scrollTop = y;//通過設置body的scrollTop值實現滾動

第一版：

我們先使用document.body.scrollTop實現切換屏幕 DEMO源碼

大家可以看到，這里勉強是實現的整屏滾動，但是滾動屏幕時切換不平滑，都是一閃就換。

作為一名強迫癥患者，我是不允許這樣子就罷了的，現在我們想要滾動的時候緩慢的切換。

第二版：(慢動作切換)

使用window.scroll(0,y)實現縱向滾動，配合setInterval函數實現慢動作切換 DEMO 源碼

實現原理是通過計算向上滾還是向下滾的下一個section的offsetTop值，來確定要滾動到哪個位置。

當開始滾動的時候也就是當前位置離目標位置最遠的時候，滾動速度最快，

當屏幕越來越接近目標位置的時候越來越慢，最后結束滾動。

這里沒有測試兼容性，只在chrome和Firefox試過。

有什么問題歡迎討論

總結

以上是生活随笔為你收集整理的视差滚动学习笔记（1）：整屏滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。