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