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; }
.started
class类会在元素进入视口顶部0.75时添加到元素上。(最顶部为0,最底部为1)。
.foo.delighter.started { transform: none; opacity: 1; }
.ended
class类会在元素进入底口顶部0.75时添加到元素上。(最顶部为0,最底部为1)。
.foo.delighter.started.ended { border: solid red 10px; }
自定义配置参数
通常情况下,插件会在DOM元素加载完毕之后自动加载。它的默认配置参数如下:
options = { attribute: 'data-delighter', classNames: ['delighter', 'started', 'ended'], start: 0.75, // default start threshold end: 0.75, // default end threshold autoInit: true // initialize when DOMContentLoaded }
你可以通过下面的方法来修改插件的默认配置参数:
Delighters.config({ // set the default start threshold at the bottom start: 1, // let's call Delighters.init() manually later autoInit: false // ... etc ... })
delighters.js 页面滚动触发css3动画js插件的github地址为:https://github.com/Q42/delighters
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!