1.   阿里云服务器1888元代金券领取
  2.   本网站所有源码包解压密码:www.youhutong.com
登录  帮助问答

页面内容加载滚动动画插件delighters.js

小川 特效组件
查看演示  

效果图:

111.jpg

描述说明:

         delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。


使用方法

在页面中引入delighters.js.js文件。

<script type="text/javascript" src="js/delighters.js.js"></script>

HTML结构

在需要制作动画的元素上添加data-delighter属性。

<div class="foo" data-delighter> </div>

 CSS样式

内置的.started和 .ended类会自动为带data-delighter的元素(或它的子元素)添加样式。

当插件被加载之后,每一个data-delighter都会获得一个 .delighter class类。

.foo.delighter {
  transition: all .3s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}

.startedclass类会在元素进入视口顶部0.75时添加到元素上。(最顶部为0,最底部为1)。

.foo.delighter.started {
  transform: none;
  opacity: 1;
}

.endedclass类会在元素进入底口顶部0.75时添加到元素上。(最顶部为0,最底部为1)。

.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 ...
})


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示  

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/445.html

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情