delighters.js

delighters.js 介绍

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

delighters.js使用  

1、引入

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

2、html

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

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

3、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;

}

网站地址:https://q42.github.io/delighters/

GitHub:https://github.com/Q42/delighters

网站描述:一款页面滚动触发css3动画js插件

delighters.js

官方网站：https://q42.github.io/delighters/

小编说

以上是编程之家为你收集整理的delighters.js全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。