0712-2888027 189-8648-0214
微信公众号

孝感风信网络科技有限公司微信公众号

当前位置:主页 > 技术支持 > Javascript/JQuery > Delighters.JS一款向下滚动页面触发css3动画JS插件

Delighters.JS一款向下滚动页面触发css3动画JS插件

时间:2024-03-29来源:风信官网 点击: 806次
Delighters.JS是一款向下滚动页面,触发css动画。在插件的主要功能是监控页面的内容,当页面内容滚动到指定触发区域时,触发CSS3动画效果。
Delighters.JS一款向下滚动页面触发css3动画JS插件
 
官方地址:https://q42.github.io/delighters/
 
github地址:https://github.com/Q42/delighters
 
使用指南
 
引入Delighters.JS文件
 
<script type="text/javascript" src="delighters.js">
 
HTML结构,在DIV中添加data-delighter>属性
<div class="foo" data-delighter>
 
CSS样式
 
内置的.started和 .ended类会自动为带data-delighter的元素(或它的子元素)添加样式。
 
当插件被加载之后,每一个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类会在元素进入视口顶部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类会在元素进入底口顶部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;
}
 
自定义配置参数
 
通常情况下,插件会在DOM元素加载完毕之后自动加载。它的默认配置参数如下:
options = {
    attribute:  'data-delighter',
    classNames: ['delighter', 'started', 'ended'],
    start:      0.75, // 默认启动阈值
    end:        0.75, // 默认结束阈值
    autoInit:   true  // 在DOMContentLoaded时初始化
  }
 
你可以通过下面的方法来修改插件的默认配置参数:
 
Delighters.config({    
    // 在底部设置默认起始阈值
    start: 1,
    // 让我们稍后手动调用Delighters.init()
    autoInit: false 
    // ... etc ...
  })
栏目列表
推荐内容
热点内容
展开