Delighters.JS是一款向下滾動(dòng)頁面，觸發(fā)css動(dòng)畫。在插件的主要功能是監(jiān)控頁面的內(nèi)容，當(dāng)頁面內(nèi)容滾動(dòng)到指定觸發(fā)區(qū)域時(shí)，觸發(fā)CSS3動(dòng)畫效果。
官方地址：https://q42.github.io/delighters/
github地址：https://github.com/Q42/delighters
使用指南
引入Delighters.JS文件
<script type="text/javascript" src="delighters.js">
HTML結(jié)構(gòu)，在DIV中添加data-delighter>屬性
<div class="foo" data-delighter>
CSS樣式
內(nèi)置的.started和 .ended類會(huì)自動(dòng)為帶data-delighter的元素（或它的子元素）添加樣式。
當(dāng)插件被加載之后，每一個(gè)data-delighter屬性都會(huì)獲得一個(gè) .delighter class類。
/* when the library loads, each [data-delighter]
gets the .delighter class */
.foo.delighter {
transition: all .3s ease-out;
transform: translateX(-100%);
opacity: 0;
}
.started class類會(huì)在元素進(jìn)入視口頂部0.75時(shí)添加到元素上。（最頂部為0，最底部為1）。
/* the .started class is set when the top
of [data-delighter] is at 0.75 of the viewport
(where 0 is top and 1 is bottom) */
.foo.delighter.started {
transform: none;
opacity: 1;
}
.ended class類會(huì)在元素進(jìn)入底口頂部0.75時(shí)添加到元素上。（最頂部為0，最底部為1）。
/* an extra .ended state is set when the bottom
of [data-delighter] is at 0.75 of the viewport
(where 0 is top and 1 is bottom) */
.foo.delighter.started.ended {
border: solid red 10px;
}
自定義配置參數(shù)
通常情況下，插件會(huì)在DOM元素加載完畢之后自動(dòng)加載。它的默認(rèn)配置參數(shù)如下：
options = {
attribute: 'data-delighter',
classNames: ['delighter', 'started', 'ended'],
start: 0.75, // 默認(rèn)啟動(dòng)閾值
end: 0.75, // 默認(rèn)結(jié)束閾值
autoInit: true // 在DOMContentLoaded時(shí)初始化
}
你可以通過下面的方法來修改插件的默認(rèn)配置參數(shù)：
Delighters.config({
// 在底部設(shè)置默認(rèn)起始閾值
start: 1,
// 讓我們稍后手動(dòng)調(diào)用Delighters.init()
autoInit: false
// ... etc ...
})
鄂公網(wǎng)安備 42090202000212號