滚动视差插件skrollr.js

东西虽好，但也不能懒到自己一点都不去做总结，那么下方将会写出从网上找到，比较好的网址(应该是根据官网翻译的)。

自己先做一个总结：这个插件兼容上做到了降级处理，虽然低端浏览器没有那么顺畅的效果，但是勉强也是能达到一定的效果。【客户想用低端的，那么便宜的效果实现了也是应该的对么？】

差件首先需要初始化一下。然后应用中主要是通过data-***来实现效果的。他会提供一个开始值与一个结束值。所有的动画效果都是在这两个区间值中去完成了。

• 那么下方是来源于网络的一些资源

skrollr是一个原生的JavaScript视差滚动插件库，没有使用jQuery等第三方框架，能够兼容移动设备的Android + iOS系统和普通的PC浏览器，代码量极其少，压缩版本的插件只有12K，设计友好和方便，没有什么JavaScript高级的使用，只是简单的CSS和HTML。

初始化插件

首先你要有skrollr.min.js在你的文档的底部文件（在标签之前）然后调用skrollr.init()或者你可以把它放在里面，但一定要调用init()函数，一旦文件被加载（如jQuery的ready事件或者是在window.onload）。

<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
    var s = skrollr.init();
</script>
</body>

如果您使用的是require.js结构你的项目，你可以使用作为一个模块以及skrollr。

require(['skrollr'], function(skrollr){
    var s = skrollr.init();
});

如果你熟悉CSS，你已经知道style属性。为了创建动画，你需要一些CSS样式。你使用HTML5的data-属性来定义元素之间切换的样式。

让我们换一个背景颜色div开始的#00F当滚动条的顶部和结束#F00当用户滚动500像素

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

参考网址A