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;
}

思源资源网：分类流动

1.阿里云: 本站现在使用的是阿里云主机，平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动，优惠券领取点击进入

3.广告同盟: 整理了现在主流的广告同盟平台，若是你有流量，可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/nav/441