使用wow.js和animate.css制作炫酷的网页的可视区域动效

Daming 2016-12-28
0条评论 766 次浏览
Daming 2016-12-280条评论 766 次浏览

访问一些网站下拉滚动条,网页的可视区域会出现各种效果感觉特别炫酷,了解了一下发现用wow.js和animate.css就能快速做出这种效果,

1.首先引用animate.css

2.在最底部引用wow.js或者wow.min.js,然后再下面再写一行javascript代码。

记得给所有wow类 元素 隐藏 (防止闪烁).wow { visibility: hidden; }

<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
    new WOW().init();
</script>

3、在css下方js上方写需要动画的元素(必须设置为块状或者行内块状!),并添加class类名。

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>

类名前面的wow是每一个带动画的元素都要加的,slideInLeft就是说明动画样式。后面的data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可选可不选。

官网:

https://daneden.github.io/animate.css

http://mynameismatthieu.com/WOW/

在线demo演示(来源于网络):http://demo.crazyming.com/?link=wow

4+

发表评论

电子邮件地址不会被公开。