动态效果html wow,WOW.js轻松让网页实现动画效果

给大家分享一个小插件，名字叫做WOW.js,这个插件是基于animate.css，animate.css是现在很流行的css动画库。这款插件作用很简单，可以及时实现网页中任意部分动画切入的效果。但是有2点要注意的地方

(1)此动画是检测屏幕滚动条实现达到一定位置执行动画效果的，所以当指定元素开始显示的时候才会开始动画，这个可以自定义。

(2)每个元素只能执行一种动画，不能同时实现多种动画一起播放的效果现在就来详细介绍一下这个插件如何使用，先贴上一个demo的例子

html>

WOW轻松让网页实现动画效果

body{overflow-x:hidden;font-family:"Microsoft Yahei";}

body h1{width:100%;margin:80px 0;font-size:50px;font-weight:500;text-align:center;}

body .txt{margin:80px 0;font-size:16px;text-align:center;}

.dowebok{margin:0 auto;}

.dowebok ul{list-style-type:none;}

.dowebok .m_list{font-size:0;text-align:center;}

.dowebok .wow{display:inline-block;width:280px;height:280px;margin:30px 15px 0;border-radius:50%;font:30px/280px "Microsoft Yahei";

vertical-align:top;*display:inline;zoom:1;}

.bg-green{background:#5bd5a0;}

.bg-blue{background:#1daee9;}

.bg-purple{background:#c843a5;}

.bg-red{background:#eb3980;}

.bg-yellow{background:#ffcc35;}

WOW.js - 页面滚动动画展示

WOW.js 能让页面滚动时显示动画，使页面更有趣。

WOW.js

简单易用

轻量级

WOW.js

无需 jQuery

纯 JS

WOW.js

依赖 animate.css

多种动画

WOW.js

无需 jQuery！？

谢谢

测试

测试

测试

//初始化

new WOW().init();

首先，介绍插件需要插入的文件和初始化流程，因为这个插件是基于animate编写的，所以插入文件得注意一下，需要引入animate.css

然后是引入WOW.js 引入的同时需要初始化init下。

//初始化

new WOW().init();

接下来我们学习下怎么自定义动画var wow = new WOW({

boxClass: 'wow',

animateClass: 'animated',

offset: 0,

mobile: true,

live: true});

boxClass    填字符串    ‘wow’是需要执行动画的元素的 class名

animateClass    字符串    ‘animated’是animation.css 动画自带的 class名

offset    整数    0 表示目标元素距离可视区域多少开始执行动画

mobile    布尔值    true    是否在移动设备上执行动画

live    布尔值    true    异步加载的内容是否有效

然后介绍一下动画播放的一些属性：

data-wow-duration="3s"   设置动画播放一次需要的时间

data-wow-delay="3s"   设置动画延迟多久开始执行

data-wow-iteration="5"   设置动画执行多少次

这些自定义属性只需要加在需要执行动画的html代码中就可以。

再介绍一下常用的几种默认动画样式：

lightSpeedIn：从右慢慢摇曳进入

rollIn：从左边旋转进入

pulse:变大

flipInX:绕x轴晃

shake:左右晃动

swing:吊在那要摇晃

bounce:原地上下抖动

bounceInLeft:从左方进来上下抖动

bounceInRight:从右方进来上下抖动

bounceInDown:从上方进来上下抖动

bounceInUp:从下方进来上下抖动

更多效果可以去 animate.css 官网 ：https://daneden.github.io/animate.css/