分享一個通過JS、CSS3滾動漸變的效果

效果預覽：http://bbs.3uol.com/tongchengmama/

主要是 skrollr.min.js  這個類的使用。

API具體可參考官方：https://github.com/Prinzhorn/skrollr

下面是其中一個漸變模塊的HTML

<div class="item" id="jiangxi" data-1630="background-image:linear-gradient(top, hsl(0, 0%, 100%),hsl(0, 0%, 100%));background-color:rgb(255,255,255);" data-1750="background-image:linear-gradient(top, hsl(31, 100%, 92%),hsl(0, 0%, 100%));background-color:rgb(255,250,244);" data-1870="background-image:linear-gradient(top, hsl(31, 100%, 92%),hsl(31, 100%, 92%));background-color:rgb(255,237,217);" data-1990="background-image:linear-gradient(top,hsl(0, 0%, 100%), hsl(31, 100%, 92%));background-color:rgb(255,250,244);" data-2110="background-image:linear-gradient(top, hsl(0, 0%, 100%),hsl(0, 0%, 100%));background-color:rgb(255,255,255);">

JS裏面調用下面代碼就可以加載了

skrollr.init({ forceHeight: false });

總結：麪包網

因爲頁面太長，需要漸變的元素太多，一行三個塊，每塊都加漸變，感覺效率有點低。而且還有鼠標hover效果，在鼠標移上移下的時間，動態往HTML裏面加屬性，不是一般的瀏覽器吃得開的，最起碼我對IE做了限制，真的有點糾結。Chrome表現最好，推薦預覽用它。如果有其他好的提高效率的方案，不妨留言交流一下。