创新路
我们一直在努力

CSS3动画JS插件:WOW.js

WOW.js是一款效果炫酷的元素在页面滚动时展示CSS3动画的JS插件。默认wow.js使用animate.css作为动画库,但是你可以通过设置来使用你喜欢的动画库。

官方网站:https://github.com/matthieua/WOW

效果演示:http://mynameismatthieu.com/WOW/

使用方法:

1、在页面中引入animate.css文件和wow.min.js文件。

<link rel="stylesheet" href="css/animate.css">
<script type="text/javascript" src="js/wow.min.js"></script>

2、JavaScript

<script>
new WOW().init();
</script>

3、如果你想某个HTML元素在页面滚动时执行动画效果,只需要简单的为这个元素添加.wow class类。

<div class="wow bounceInUp">内容……</div>

4、进阶效果,你可以以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

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

data-wow-duration 改变动画时间
data-wow-delay 延迟在动画开始之前
data-wow-offset 距离开始动画(有关浏览器底部)
data-wow-iteration 动画重复的次数

附件:WOW.js动画效果大全

.hinge 
.bounce 
.flash 
.pulse 
.shake 
.swing 
.tada 
.wobble 
.bounceIn 
.bounceInDown 
.bounceInLeft 
.bounceInRight 
.bounceInUp 
.bounceOut 
.bounceOutDown 
.bounceOutLeft 
.bounceOutRight 
.bounceOutUp 
.fadeIn 
.fadeInDown 
.fadeInDownBig 
.fadeInLeft 
.fadeInLeftBig 
.fadeInRight 
.fadeInRightBig 
.fadeInUp 
.fadeInUpBig 
.fadeOut 
.fadeOutDown 
.fadeOutDownBig 
.fadeOutLeft 
.fadeOutLeftBig 
.fadeOutRight 
.fadeOutRightBig 
.fadeOutUp 
.fadeOutUpBig 
.flip 
.flipInX 
.flipInY 
.flipOutX 
.flipOutY 
.lightSpeedIn 
.lightSpeedOut 
.rotateIn 
.rotateInDownLeft 
.rotateInDownRight 
.rotateInUpLeft 
.rotateInUpRight 
.rotateOut 
.rotateOutDownLeft 
.rotateOutDownRight 
.rotateOutUpLeft 
.rotateOutUpRight 
.slideInDown 
.slideInLeft 
.slideInRight 
.slideOutLeft 
.slideOutRight 
.slideOutUp 
.hinge 
.rollIn 
.rollOut

未经允许不得转载:天府数据港官方信息博客 » CSS3动画JS插件:WOW.js

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机