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