建站
咨詢
售后
建站咨詢
新聞中心
如何實現(xiàn)視差滾動效果的網(wǎng)頁
視差滾動（Parallax Scrolling）是指多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。一般把網(wǎng)頁解剖為：背景層、內(nèi)容層和懸浮層(貼圖層)。
目前創(chuàng)新互聯(lián)建站已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計、自流井網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
當(dāng)滾動鼠標(biāo)滾輪的時候，各圖層以不同速度移動，形成視差的效果。這就是時差滾動的大致原理。
原理是這樣，但落實到技術(shù)細節(jié)上時，實現(xiàn)的方法卻各種各樣。
我個人大致歸納了一下：
1、以 “頁面滾動條” 作為 “視差動畫進度條” 的；
2、以 “滾輪刻度” 當(dāng)作 “動畫幀度” 去播放動畫的（或者直接稱為“隱藏進度條”）；
3、鑒聽mousewheel事件，事件被觸發(fā)即播放動畫，實現(xiàn)“翻頁”效果；
下面的回答，均以上述1類的實現(xiàn)方式為基準(zhǔn)。
為什么是1類呢？因為它很直觀，和我們?nèi)粘＝佑|到的視頻播放器是一樣的：
下面，以Every Last Drop這個頁面做為分析對象，去回答題主的問題。
做滾動網(wǎng)頁的時候，是怎么實現(xiàn)頁面的翻頁？
首先，根據(jù)頁面動畫所需的分鏡，去等比劃分進度條。
例如：共有11個分鏡，則分鏡大致可以劃分為：0%、10%、20%、30% .... 100%
但需要注意的是，整個滾動過程實際分為兩個部分：分鏡切換 和 分鏡動畫。
我們要預(yù)先劃分好他們的比例，如：每一個分鏡，2%的進度用于分鏡切換，7%的進度用于分鏡動畫。
則進度大致可以劃分為：
------------------------------------------
0%(初始，分鏡1)
↓
(消耗2%用于切換分鏡)
↓
2%(完全進入分鏡2）
↓
(消耗8%用于分鏡動畫的播放)
↓
10%(分鏡2動畫播放完畢)
↓
(消耗2%用于切換分鏡)
↓
12%(完全進入分鏡3）
↓
...（略）
------------------------------------------
按照上面的劃分，當(dāng)進度條滾動到10%的時候，就要開始進行分鏡2到分鏡3的切換，也就是所謂的翻頁。當(dāng)滾動到12%時，翻頁結(jié)束。其他分鏡如此類推。
（如果題主想問的是技術(shù)實現(xiàn)細節(jié)，估計要失望了！）
在做時間軸的時候，一般都要調(diào)用別人的js庫。那么這個滾動頁面，是不是也有一個js庫？
隨便在google搜一下，就搜到很多關(guān)于視差滾動插件的文章：10個優(yōu)秀視差滾動插件
這里補充一點：做視差滾動頁面絕對是體力活。
本著我為人人的分享精神，還是推薦一個我覺得好用湊合好用的時差滾動庫:
Jarallax(Welcome to Jarallax.com)
設(shè)計思路清晰，API設(shè)計也很直觀。依賴于jQuery1.7的版本，再高的版本就不支持了哦！
另外，作者貌似已經(jīng)沒有維護了...
滾動時每層不同滾動速率的實現(xiàn)原理是什么？
初中物理：單位時間相同，位移距離不同，速度也不同。
如何讓滾動更加平滑？
這個問題就太大了，能重新開一個問題了。
這邊我就簡單回答一下吧（不細談前端技術(shù)層面的優(yōu)化，如：DOM數(shù)量、頁面渲染優(yōu)化這些）。
開頭處，我提到的三種實現(xiàn)分類，實際上是這樣一個情況：
1類是最自由的，用戶甚至可以直接調(diào)整進度條，實現(xiàn)“快進”。
在這種設(shè)計下，用戶鼠標(biāo)滾輪的最小刻度，就是動畫的一幀。因為不同瀏覽器之間，鼠標(biāo)滾輪的最小刻度是不一樣的。這就導(dǎo)致了，在不同瀏覽器之間，頁面滾動過程中，動畫播放的幀率是有差異的。如果遇到奇葩瀏覽器，鼠標(biāo)滾動的最小刻度很大，動畫甚至?xí)霈F(xiàn)“掉幀”的情況。
解決方法很簡單，一般采取增加頁面長度的方式，來稀釋鼠標(biāo)滾輪的最小刻度。
但還是會有一些情況出現(xiàn)，如戶快拖動進度條時，“掉幀”的情況難免還是會出現(xiàn)。
3類的實現(xiàn)，滾輪只是動畫的觸發(fā)按鈕。當(dāng)用戶滾動了一下鼠標(biāo)，之前設(shè)計好的動畫就開始播放。當(dāng)播放結(jié)束后，對滾動事件的監(jiān)聽，才會重新被激活。這種設(shè)計，弱化了交互，但提供了更優(yōu)質(zhì)的動畫展現(xiàn)。因為動畫的播放時間和幀率不是用戶控制的，是事先代碼所設(shè)定好的。
2類就不說了，介乎與1和3之間。
簡單的說，魚(流暢)與熊掌(操控性)不可得兼。
CSS滾動視差
何為滾動視差
視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。 作為網(wǎng)頁設(shè)計的熱點趨勢，越來越多的網(wǎng)站應(yīng)用了這項技術(shù)。
通常而言，滾動視差在前端需要輔助 Javascript 才能實現(xiàn)。但是使用background-attachment也可以做到這樣的效果。
要了解background-attachment的作用可以參考我的另一篇關(guān)于它的簡單介紹：
什么是background-attachment
使用background-attachment: fixed實現(xiàn)滾動視差
首先，我們使用background-attachment: fixed來實現(xiàn)滾動視差。fixed?此關(guān)鍵字表示背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內(nèi)容滾動。
這里的關(guān)鍵在于，即使一個元素擁有滾動機制，背景也不會隨著元素的內(nèi)容滾動。也就是說， 背景圖從一開始就已經(jīng)被固定死在初始所在的位置。
我們使用，圖文混合排布的方式，實現(xiàn)滾動視差，HTML 結(jié)構(gòu)如下， .g-word表示內(nèi)容結(jié)構(gòu)，.g-img表示背景圖片結(jié)構(gòu) ：
關(guān)鍵 CSS：
效果如下：
嗯？有點神奇，為什么會是這樣呢？可能很多人會和我一樣，第一次接觸這個屬性對這樣的效果感到懵逼。
我們把上面background-attachment: fixed注釋掉，或者改為background-attachment: local，再看看效果：
這次，圖片正常跟隨滾動條滾動了，按常理，這種效果才符合我們大腦的思維。
而滾動視差效果，正是不按常理出牌的一個效果，重點來了：
當(dāng)頁面滾動到圖片應(yīng)該出現(xiàn)的位置，被設(shè)置了background-attachment: fixed的圖片并不會繼續(xù)跟隨頁面的滾動而跟隨上下移動，而是相對于視口固定死了。
好，我們再來試一下， 如果把所有.g-word內(nèi)容區(qū)塊都去掉 ，只剩下全部設(shè)置了background-attachment: fixed的背景圖區(qū)塊，會是怎么樣呢？
效果如下：
結(jié)合這張 GIF，相信能對background-attachment: fixed有個更深刻的認(rèn)識，移動的只有視口，而背景圖是一直固定死的。
綜上，就是 CSS 使用background-attachment: fixed實現(xiàn)滾動視差的一種方式，也是相對而言比較容易的一種。
參考文章： 滾動視差？CSS 不在話下
html css 不用fix怎么讓圖片隨滾動條移動
這個是網(wǎng)頁“視差滾動”的效果，知乎有相關(guān)的回答網(wǎng)頁鏈接。
推薦的視差滾動插件：skrollr.js
html5 視覺差滾動效果怎么實現(xiàn)
html5 視覺差滾動效果
原理就是一種利用控制各個圖片層之間滾動的速度，來產(chǎn)生一種立體空間的效果，每個層都用一個png透明圖片做為背景，然后滾動的時候控制一下每個不同的速度。
不過有兩個方面需要注意：
1、以大量圖片為特色的網(wǎng)站應(yīng)該考慮圖像的預(yù)加載問題，以便為用戶提供更好更流暢的視覺體驗；
2、某些網(wǎng)站頁面在移動設(shè)備上的效果可能較之在PC上有所不同，一些功能也可能無法正常使用。
新聞標(biāo)題：關(guān)于html5視差滾動的信息
標(biāo)題鏈接：http://www.dlmjj.cn/article/dsscehh.html
