0712-2888027 189-8648-0214
微信公眾號(hào)

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

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

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

時(shí)間:2024-09-20來源:風(fēng)信官網(wǎng) 點(diǎn)擊: 1031次
Delighters.JS是一款向下滾動(dòng)頁(yè)面,觸發(fā)css動(dòng)畫。在插件的主要功能是監(jiān)控頁(yè)面的內(nèi)容,當(dāng)頁(yè)面內(nèi)容滾動(dòng)到指定觸發(fā)區(qū)域時(shí),觸發(fā)CSS3動(dòng)畫效果。
Delighters.JS一款向下滾動(dòng)頁(yè)面觸發(fā)css3動(dòng)畫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類會(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 ...
  })

您可能感興趣的相關(guān)文章:

欄目列表
推薦內(nèi)容
熱點(diǎn)內(nèi)容
展開