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

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表