## Parallax
Parallax 滚动视差动画组件，提供基础滑动、事件回调及内置动画支持。GitHub 地址：https://github.com/hahnzhu/parallax.js
一、使用
1、HTML
~~~
<!-- 这里的每个标签和每个类都是必须的 -->
<div class="wrapper">
<div class="pages">
<!-- 第一屏 -->
<div class="page">
<!-- anything you want.... -->
</div>
<!-- 第二屏 -->
<div class="page">
</div>
<!-- 第三屏 -->
<div class="page">
</div>
...
</div>
</div>
~~~
CSS 引用：
~~~
<link rel="stylesheet" href="{your path}/parallax.css">
/* 如果需要使用内置动画，需要引用下面的内容 */
<link rel="stylesheet" href="{your path}/parallax-animation.css">
~~~
JS 引用：
~~~
<script src="{your path}/zepto.min.js"></script>
<script src="{your path}/parallax.js"></script>
<script>
$('.pages').parallax();
</script>
~~~
二、定制
~~~
<script>
// 下面的都是默认属性
$('.pages').parallax({
direction: 'vertical', // horizontal (水平翻页)
swipeAnim: 'default', // cover (切换效果)
drag: true, // 是否允许拖拽 (若 false 则只有在 touchend 之后才会翻页)
loading: false, // 有无加载页
indicator: false, // 有无指示点
arrow: false, // 有无指示箭头
/*
* 翻页后立即执行
* {int} index: 第几页
* {DOMElement} element: 当前页节点
* {String} directation: forward(前翻)、backward(后翻)、stay(保持原页)
*/
onchange: function(index, element, direction) {
// code here...
},
/*
* 横竖屏检测
* {String} orientation: landscape / protrait
*/
orientationchange: function(orientation) {
// code here...
}
});
</script>
~~~
三、DOM 接口
~~~
<div class="wrapper">
<!-- 初始化后自动添加 direction、swipeAnim、direction 类，其中 direction 在翻页的过程中才会添加。 -->
<div class="pages vertical/horizontal default/cover forward/backward">
<!-- 为 page 添加 data-id，当前 page 会自动添加 current 类(翻页后立即添加) -->
<section data-id="1" class="current">
...
</section>
<section data-id="2">
...
</section>
</div>
</div>
~~~
四、内置动画
有四种内置动画，分别是 slideToTop/Bottom/Left/Right、 fadeInToTop/Bottom/Left/Right、 followSlide 和 fadeIn/Out，动画参数可通过 data-animation、 data-duration、 data-delay 和 data-timing-function 进行配置。
**EXAMPLE**
注：followSlide 效果会根据翻页方向的不同而改变，如下：
Demo 演示
请模拟 touch 事件体验：
~~~
<!-- CSS -->
<style>
section[data-id="1"] {
background-color: #3498db;
}
section[data-id="2"] {
background-color: #40d47e;
}
section[data-id="3"] {
background-color: #ff8c81;
}
section[data-id="4"] {
background-color: #3498db;
}
.box1 {
width: 100px;
height: 200px;
background-color: #ecf0f1;
position: absolute;
left: 160px; top: 126px;
}
.box2 {
width: 200px;
height: 100px;
background-color: #8e44ad;
position: absolute;
left: 60px; top: 226px;
}
.box3 {
width: 100px;
height: 100px;
background-color: #34495e;
position: absolute;
left: 160px; top: 226px;
}
.box4 {
width: 50px;
height: 50px;
background-color: #e74c3c;
position: absolute;
left: 185px; top: 250px;
}
</style>
<!-- HTML -->
<div class="wrapper">
<div class="pages">
<!-- 第一屏 -->
<section class="page">
<div class="box1" data-animation="slideToBottom" data-timing-function="ease-in"></div>
<div class="box2" data-animation="slideToTop" data-delay="300" data-timing-function="ease-out"></div>
<div class="box3" data-animation="slideToRight" data-delay="600" data-timing-function="linear"></div>
<div class="box4" data-animation="slideToLeft" data-delay="900" data-timing-function="cubic-bezier(.12,.73,.62,1.38)"></div>
</section>
<!-- 第二屏 -->
<section class="page">
<div class="box1" data-animation="followSlide" data-duration="1000"></div>
<div class="box2" data-animation="followSlide" data-delay="200" data-duration="1000"></div>
<div class="box3" data-animation="followSlide" data-delay="400" data-duration="1000"></div>
<div class="box4" data-animation="followSlide" data-delay="600" data-duration="1000"></div>
</section>
<!-- 第三屏 -->
<section class="page">
<div class="box1" data-animation="fadeInToBottom"></div>
<div class="box2" data-animation="fadeInToTop" data-delay="200"></div>
<div class="box3" data-animation="fadeInToLeft" data-delay="400"></div>
<div class="box4" data-animation="fadeInToRight" data-delay="600"></div>
</section>
<!-- 第四屏 -->
<section class="page">
<div class="box1" data-animation="fadeIn"></div>
<div class="box2" data-animation="fadeOut" data-delay="800"></div>
</section>
</div>
</div>
<!-- JS -->
<script>
$('.pages').parallax();
</script>
~~~
