一、效果Demo先行~
視差滾動(dòng)效果大家可能都聽過，基本上都是JS實(shí)現(xiàn)的，有對應(yīng)插件 - Parallax.js .
實(shí)際上，如果你對兼容性要求不是很高，比方說忽略IE瀏覽器，則我們使用簡單的幾行CSS代碼就可以實(shí)現(xiàn)視差滾動(dòng)效果了。
對于效果展示，先看效果是最能引起興趣，激發(fā)學(xué)習(xí)熱情的，如下(IE9+)：
進(jìn)入Demo滾動(dòng)滾動(dòng)條，最好鼠標(biāo)慢慢拖動(dòng)，效果更明顯——表情花朵等小圖標(biāo)在手機(jī)圖片上方飛動(dòng)的視差感覺。目前，Chrome以及FireFox等瀏覽器(不包括IE11在內(nèi)的瀏覽器)都是有效果。
二、CSS實(shí)現(xiàn)的原理
原理說透了很簡單，下面幾個(gè)關(guān)鍵CSS聲明起的作用(紅色高亮部分)：

大家可以注意上面紅色高亮代碼出現(xiàn)了一個(gè)1px(來自perspective), 一個(gè)-1px(來自transform)以及scale(2)中的2. 這幾個(gè)數(shù)字之間有什么關(guān)系呢？
我們先看下面這個(gè)3D視角示意圖(來自 這里 )：

 
當(dāng)我們在屏幕前面1個(gè)單位的地方，看屏幕后面1個(gè)單位的元素，肉眼所見的畫面大小只有實(shí)際的1/2，即所謂的近大遠(yuǎn)小。此時(shí)scale(2)讓內(nèi)容放大到原來2倍，正好在平面上看上去好像是原來大小。
雖然肉眼所見體積似乎是1:1，但是，滾動(dòng)時(shí)候的位移變化還是1:2, 應(yīng)該很好理解。舉個(gè)極端的例子，我們坐在電瓶車上看天上的月亮，雖然車子在40碼的速度奔啊奔，但是，好像月亮的位置沒有移動(dòng)，一直就在頭頂。網(wǎng)頁中的3D就是模擬真實(shí)世界的3D效果，因此，也會(huì)有這種視差體驗(yàn)。