学习记录。。视差滚动
整理几位前辈的心得
https://www.cnblogs.com/shimily/articles/5145992.html (很详细中文教程)
https://www.cnblogs.com/numbbbbb/archive/2013/06/02/3113959.html （挺早的教程，无耻的参照了排版格式=。=）
插件描述：单独的视差滚动的JavaScript库，支持手机（Android，iOS，等）大小只有12K。
一、skrollr介绍
skrollr是一个开源的视差滚动js插件，兼容性极强，可以兼容各种浏览器（包括IE）以及手机端（IOS/Android）。
二、skrollr用法简介
<link href="examples/fixed-positioning.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dist/skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>
首先，要在文档底部包含skrollr.min.js文件（在闭合之前</ body>），然后调用skrollr.init（）。 或者你可以将它放在<head>中，但是一旦文档被加载（例如jQuery的ready事件，甚至是window.onload），一定要调用init（）。
针对IE9以下的浏览器，还需添加skrollr.ie.min.js
<!--[if lt IE 9]>
<script type="text/javascript" src="js/skrollr.ie.min.js"></script>
<![endif]-->
通过 data 属性
1、目标：滚动条在最上方时，让div的background-color为rgb(0,0,255)；当滚动条滚动到500px时div的background-color变化为rgb(255,0,0)；
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
dome
设置元素的“data-开始位置”和“data-结束位置”的值即可，skrollr会自动处理颜色随滚动渐变效果。
2、目标：让div转起来
<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>
dome
你可以定义任意多个效果，skrollr都可以让他们随着滚动变化。
3、目标：让div hip-hop起来
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
dome
可以使用skrollr提供的一些easing函数，改变运动方式。
4、目标：使用相对位置而不是绝对位置
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
将“data-500”换成了“data-top”。skrollr不仅可以处理绝对位置，也可以处理相对位置。
JavaScript
On the JavaScript part there's not much to do (you can, if you want to!). So if you only know CSS and HTML, perfect.
在JavaScript部分没有太多的事情要做（如果你愿意，你可以！）。 所以如果你只知道CSS和HTML，那就完美了。
skrollr.init([options])
All there is to do is to call skrollr.init([options]); which returns an instance of the singleton skrollr class. Subsequent calls to init() will just return the same skrollr instance again.
Possible options for init() are
所有要做的就是调用skrollr.init（[options]）; 它返回单例skrollr类的一个实例。 随后对init（）的调用将再次返回相同的skrollr实例。
init（）的可能选项是
smoothScrolling=true
Smooth scrolling smoothens your animations. When you scroll down 50 pixels, the animations will transition instead of jumping to the new position.
The global setting can be overridden per element by setting data-smooth-scrolling to on or off.
平滑滚动平滑您的动画。 当您向下滚动50个像素时，动画将转换而不是跳转到新位置。
通过将数据平滑滚动设置为打开或关闭，可以覆盖每个元素的全局设置。
smoothScrollingDuration=200
The number of milliseconds the animations run after the scroll position changed the last time.
上次滚动位置更改后动画运行的毫秒数。
constants={}
接下来内容实在太多了 =。= 需要更详细的可以去开头引用的中文教程，
https://www.cnblogs.com/shimily/articles/5145992.html (很详细中文教程)
或去GitHub官方网站Github主页
我只是做个学习笔记，希望前辈别揍我脸(￣ε(#￣)
