## 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>
~~~
