页面滚动动画插件delighters.js

所属分类:UI,其他-滚动,动画效果

 30342  416  查看评论 (4)
分享到微信朋友圈
X
页面滚动动画插件delighters.js ie兼容10

使用方法

在页面中引入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 ...
})
相关插件-滚动,动画效果

页面过度效果大集合(推荐!)

jQuery页面过度效果大集合
  滚动
 74812  1334

js交集监测插件scrollama.js

Scrollama是一个轻量级JavaScript库, 用于检测页面滚动时监听元素是否重叠。
  滚动
 25032  326

jQuery滚轮控制轮播图上下切换(原创)

jQuery滚轮控制轮播图上下切换,简单实用
  滚动
 38442  341

jQuery上下左右滚动插件rollSlide.js

实现上下左右自动滚动、无缝滚动
  滚动
 67578  557

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    痞兜兜 0
    2018/9/27 17:14:15
    这个可以试试看啊 回复
    0
    2018/7/13 16:11:17
    这个和fullpage.js冲突吗? 回复
    *上邪!!! 0
    2018/7/12 15:05:12
    炫酷狂拽吊炸天 回复
    我养你呀! 0
    2018/7/10 10:54:29
    那个HTML结构的属性是不是添加错了? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复