分享一个通过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表现最好，推荐预览用它。如果有其他好的提高效率的方案，不妨留言交流一下。