0712-2888027 189-8648-0214
微信公眾號

孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

當(dāng)前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > Delighters.JS一款向下滾動頁面觸發(fā)css3動畫JS插件

Delighters.JS一款向下滾動頁面觸發(fā)css3動畫JS插件

時間:2018-10-22來源:風(fēng)信官網(wǎng) 點擊: 1075次
Delighters.JS是一款向下滾動頁面,觸發(fā)css動畫。在插件的主要功能是監(jiān)控頁面的內(nèi)容,當(dāng)頁面內(nèi)容滾動到指定觸發(fā)區(qū)域時,觸發(fā)CSS3動畫效果。
Delighters.JS一款向下滾動頁面觸發(fā)css3動畫JS插件
 
官方地址: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類會自動為帶data-delighter的元素(或它的子元素)添加樣式。
 
當(dāng)插件被加載之后,每一個data-delighter屬性都會獲得一個 .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類會在元素進(jìn)入視口頂部0.75時添加到元素上。(最頂部為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類會在元素進(jìn)入底口頂部0.75時添加到元素上。(最頂部為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ù)
 
通常情況下,插件會在DOM元素加載完畢之后自動加載。它的默認(rèn)配置參數(shù)如下:
options = {
    attribute:  'data-delighter',
    classNames: ['delighter', 'started', 'ended'],
    start:      0.75, // 默認(rèn)啟動閾值
    end:        0.75, // 默認(rèn)結(jié)束閾值
    autoInit:   true  // 在DOMContentLoaded時初始化
  }
 
你可以通過下面的方法來修改插件的默認(rèn)配置參數(shù):
 
Delighters.config({    
    // 在底部設(shè)置默認(rèn)起始閾值
    start: 1,
    // 讓我們稍后手動調(diào)用Delighters.init()
    autoInit: false 
    // ... etc ...
  })
熱門關(guān)鍵詞: Delighters.JS 滾動頁面 css3動畫 JS插件
欄目列表
推薦內(nèi)容
熱點內(nèi)容
展開