使用CSS和JavaScript創建基本的視差滾動效果
網頁設計中2015年最主要的趨勢無疑是視差滾動效應，沒有任何跡象正在減弱。視差滾動將頁面轉換為有趣的幻燈片，其中頁面上的不同元素相對於頁面的滾動以不同的速度移動。在本教程中，我們將熟悉如何在CSS和JavaScript中創建基本的視差滾動頁面，並深入了解整個過程中的shebang。
? 視差滾動效果的解剖
維基百科簡潔地將視差滾動效果定義 為：
“計算機圖形學中的一種特殊的滾動技術，其中背景圖像通過相機移動比前景圖像慢，在2D視頻遊戲中產生深度幻覺並增加沈浸感。”
由於它屬於網頁，視差效果與頁面的滾動有關; 當執行此動作時，頁面上的不同元素（例如背景圖像和前景元素）以相對於滾動條的不同速度移動/動畫，所有這些元素都使用JavaScript進行編排。看一下下面的簡單視差滾動示例，它包含一個大的背景圖像以及相對於滾動條以不同速度移動的3個圖層：
演示：簡單的視差滾動效果
任何視差效果中使用的JavaScript都有效地完成以下兩件事：
- 通過檢查諸如的關鍵屬性，精確監控文檔滾動的程度和變化率
window.pageYOffset。 - 通過調用窗口
onscroll事件中的代碼，在文檔滾動時相對於滾動條為頁面上的各種元素設置動畫。
讓我們一步一步解釋如何將上面的視差效果放在一起，並通過它，將神秘主義者從它中解放出來！
? 與背景和泡沫的起始頁
首先，我們將構建基本頁面，只有深海背景和兩個大氣泡，沒有魚或JavaScript妨礙我們：
演示： 初始頁面有兩個氣泡
HTML標記是準系統：
<span style="color:#000000"><BODY> <div id =“bubbles1”> </ div> <div id =“bubbles2”> </ div> </ BODY></span>
觀察頁面上的不同圖層以及它們的位置。BODY元素僅用於顯示大型深海背景圖像：
<span style="color:#000000">身體{
身高：2000px;
背景：海軍網址（deepsea.jpg）頂部中心無重復固定;
背景尺寸：封面;
}</span>background-size: coverCSS3屬性確保圖像覆蓋元素的整個區域; 它使用背景圖像抹去我們身體每一寸的輕微工作，雖然這個屬性是資源密集型的，並且應該在視差滾動應用中使用約束。
然後是我們的兩個泡泡。每個都呈現為DIV的背景圖像，該DIV固定在頁面上並位於頁面的左上角：
<span style="color:#000000">＃bubbles1，＃bubbles2 { 寬度：100％; 身高：100％; 頂部：0; 左：0; 位置：固定; z-index：-1; background：url（bubbles1.png）5％50％不重復; } ＃bubbles2 { background：url（bubbles3.png）95％90％不重復; }</span>
無論頁面是否滾動，這都會在視圖中以及在background屬性內設置的精確坐標處錨定兩個氣泡。
? Parallaxing氣泡
將平臺設置為兩個氣泡層的視差。當我們滾動頁面時，我們將以與滾動相反的方向移動每一層，並以不同的速度移動：
演示： 帶有parallaxing氣泡的頁面
JavaScript的：
<span style="color:#000000"><SCRIPT>
//創建跨瀏覽器requestAnimationFrame方法：
window.requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function（f）{setTimeout（f，1000/60）}
var bubble1 = document.getElementById（‘bubbles1‘）
var bubble2 = document.getElementById（‘bubbles2‘）
function parallaxbubbles（）{
var scrolltop = window.pageYOffset //獲取文檔垂直滾動的像素數
bubble1.style.top = -scrolltop * .2 +‘px‘//以20％的滾動速率移動bubble1
bubble2.style.top = -scrolltop * .5 +‘px‘//以50％的滾動速率移動bubble2
}
window.addEventListener（‘scroll‘，function（）{//頁面滾動
requestAnimationFrame（parallaxbubbles）//在下一個可用的屏幕畫面上調用parallaxbubbles（）
}，false）
</ SCRIPT></span>讓我們分解這裏發生的事情。現在忽略requestAnimationFrame（）方法，首先，我們通過它們的ID引用兩個氣泡層。在parallaxbubbles()函數內部，我們將每個氣泡移動當前垂直滾動量的一小部分，從而使氣泡相對於滾動以不同的速度移動。在scrolltop 變量前面添加的負運算符會導致每個氣泡在滾動的相反方向上移動。
繼續，我們點擊scroll窗口對象的“ ”事件，以便在窗口滾動時執行代碼。但是parallaxbubbles()，我們不會直接在這個事件中直接調用 ，而是采取更加迂回的路線，有利於性能而不是簡潔。而這條路線涉及parallaxbubbles()在JavaScript的requestAnimationFrame()方法中間接調用。後者是一個JavaScript方法（具有取決於瀏覽器的各種前綴版本），它接受函數引用並在下一個可用的屏幕重繪上執行該函數scroll事件，我們可以期望快速連續調用代碼 - 優化性能然後是關鍵，並在內部應用任何動畫代碼requestAnimationFrame()
? 一種在屏幕上水平移動的parallaxing魚
因此，我們現在有一個帶有兩個平行氣泡的頁面，每個氣泡與滾動相比都以較低的速率移動。沒有邏輯規定相對於文檔滾動的程度，頁面上的氣泡應該精確到位。
對於下一個對象，我們將是parallaxing，讓我們對它進行排列，使對象從窗口的左邊緣向右滑動，與滾動條同步。當滾動條位於最頂部時，對象位於左邊緣，逐漸移動，直到滾動條位於最右端，此時對象將位於右邊緣。魚對象的位置與其他圖層的位置相似，但靠近窗口的左側和底部。
演示：帶有parallaxing氣泡和魚的頁面
CSS：
<span style="color:#000000">＃bubbles1，＃bubbles2，＃fish {
寬度：100％;
身高：100％;
頂部：0;
左：0;
位置：固定;
z-index：-1;
background：url（bubbles1.png）5％50％不重復;
}
＃魚{
左：-100％;
background：url（fish.png）對90％不重復;
}</span>JavaScript的：
<span style="color:#000000"><SCRIPT>
//創建跨瀏覽器requestAnimationFrame方法：
window.requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function（f）{setTimeout（f，1000/60）}
var bubble1 = document.getElementById（‘bubbles1‘）
var bubble2 = document.getElementById（‘bubbles2‘）
var fish = document.getElementById（‘fish‘）
var scrollheight = document.body.scrollHeight //整個文檔的高度
var windowheight = window.innerHeight //瀏覽器窗口的高度
function parallaxbubbles（）{
var scrolltop = window.pageYOffset //獲取文檔垂直滾動的像素數
var scrollamount =（scrolltop /（scrollheight-windowheight））* 100 //滾動量（以％為單位）
bubble1.style.top = -scrolltop * .2 +‘px‘//以20％的滾動速率移動bubble1
bubble2.style.top = -scrolltop * .5 +‘px‘//以50％的滾動速率移動bubble2
fish.style.left = -100 + scrollamount +‘％‘//設置魚的位置百分比（從-100％開始）
}
window.addEventListener（‘scroll‘，function（）{//頁面滾動
requestAnimationFrame（parallaxbubbles）//在下一個可用的屏幕畫面上調用parallaxbubbles（）
}，false）
window.addEventListener（‘resize‘，function（）{//在窗口調整大小
var scrolltop = window.pageYOffset //獲取文檔垂直滾動的像素數
var scrollamount =（scrolltop /（scrollheight-windowheight））* 100 //滾動量（以％為單位）
fish.style.left = -100 + scrollamount +‘％‘//設置魚的位置百分比（從-100％開始）
}，false）
</ SCRIPT></span>我們首先在頁面中添加ID為“fish”的DIV（查看演示頁面源代碼），然後fish在我們的JavaScript中使用“ ”變量引用它。接下來是兩個變量，它們分別得到文檔的總高度和瀏覽器窗口的高度：
<span style="color:#000000">var scrollheight = document.body.scrollHeight //整個文檔的高度
var windowheight = window.innerHeight //瀏覽器窗口的高度</span>在parallaxbubbles()函數內部，我們可以精確計算滾動條的滾動量占整個可滾動軌道的百分比（其中0表示滾動條位於最頂部，100％表示位於最底部）使用此魔術線：
<span style="color:#000000">var scrollamount =（scrolltop /（scrollheight-windowheight））* 100 //滾動量（以％為單位）</span>子操作(scrollheight-windowheight)，或從文檔的總高度中減去窗口的高度，使我們知道滾動條在到達文檔底部之前能夠行進的總距離。正是這一點，我們希望我們的魚對象位於窗口的右邊緣。
當我們劃分scrolltop（滾動條當前行進多少）時(scrollheight-windowheight)，我們得到滾動條行進的百分比，作為總距離的百分比。乘以100可將該信息轉換為百分比值，其中0表示滾動條位於最頂部，100表示??滾動軌跡的最末端：
?
現在我們知道滾動條以百分比滾動了多少，我們可以直接將該值作為魚圖層left屬性的一部分提供，並按比例移動滾動條滾動的數量：
<span style="color:#000000">fish.style.left = -100 + scrollamount +‘％‘//設置魚的位置百分比（從-100％開始）</span>-100left魚的位置是-100％，將它隱藏起來。當用戶滾動頁面時，該值逐漸增加，直到達到0％。這就是當窗口右邊緣的魚應用耳朵（實際的魚形圖像應用耳朵作為背景定位在魚群內部的最右側）。
使用CSS和JavaScript創建基本的視差滾動效果