bounce
距离底部280px时开始动画

flash
延迟3秒开始动画

pulse
动画执行3次

rubberBand
动画过程时间为5秒

shake
animated动效WOW演示

swing
animated动效WOW演示

tada
animated动效WOW演示

wobble
animated动效WOW演示

bounceIn
animated动效WOW演示

bounceInDown
animated动效WOW演示

bounceInLeft
animated动效WOW演示

bounceInRight
animated动效WOW演示

bounceInUp
animated动效WOW演示

bounceOut
animated动效WOW演示

bounceOutDown
animated动效WOW演示

bounceOutLeft
animated动效WOW演示

bounceOutRight
animated动效WOW演示

bounceOutUp
animated动效WOW演示

fadeIn
animated动效WOW演示

fadeInDown
animated动效WOW演示

fadeInDownBig
animated动效WOW演示

fadeInLeft
animated动效WOW演示

fadeInLeftBig
animated动效WOW演示

fadeInRight
animated动效WOW演示

fadeInRightBig
animated动效WOW演示

fadeInUp
animated动效WOW演示

fadeInUpBig
animated动效WOW演示

fadeOut
animated动效WOW演示

fadeOutDown
animated动效WOW演示

fadeOutDownBig
animated动效WOW演示

fadeOutLeft
animated动效WOW演示

fadeOutLeftBig
animated动效WOW演示

fadeOutRight
animated动效WOW演示

fadeOutRightBig
animated动效WOW演示

fadeOutUp
animated动效WOW演示

fadeOutUpBig
animated动效WOW演示

flip
animated动效WOW演示

flipInX
animated动效WOW演示

flipInY
animated动效WOW演示

flipOutX
animated动效WOW演示

flipOutY
animated动效WOW演示

lightSpeedIn
animated动效WOW演示

lightSpeedOut
animated动效WOW演示

rotateIn
animated动效WOW演示

rotateInDownLeft
animated动效WOW演示

rotateInDownRight
animated动效WOW演示

rotateInUpLeft
animated动效WOW演示

rotateInUpRight
animated动效WOW演示

rotateOut
animated动效WOW演示

rotateOutDownLeft
animated动效WOW演示

rotateInDownRight
animated动效WOW演示

rotateOutDownRight
animated动效WOW演示

rotateOutUpLeft
animated动效WOW演示

rotateOutUpRight
animated动效WOW演示

hinge
animated动效WOW演示

rollIn
animated动效WOW演示

rollOut
animated动效WOW演示

zoomIn
animated动效WOW演示

zoomInDown
animated动效WOW演示

zoomInLeft
animated动效WOW演示

zoomInRight
animated动效WOW演示

zoomInUp
animated动效WOW演示

zoomOut
animated动效WOW演示

zoomOutDown
animated动效WOW演示

zoomOutLeft
animated动效WOW演示

zoomOutRight
animated动效WOW演示

zoomOutUp
animated动效WOW演示

简介

有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。

浏览器兼容

IE10+ ✔ Chrome✔ Firefox ✔ Opera✔ Safari✔

IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。

使用方法

1、引入文件

<link rel="stylesheet" href="css/animate.min.css">

2、HTML

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

可以加入 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>

3、wow使用

class中必须要要包含wow

data-wow-duration:改变动画过程时间

data-wow-delay:延迟在动画开始之前

data-wow-offset:距离开始动画(元素距离浏览器底部bottom多高时开始动画)

data-wow-iteration:动画重复的次数

4、JavaScript

new WOW().init();

如果需要自定义配置,可如下使用:

var wow = new WOW({
   boxClass: 'wow',
   animateClass: 'animated',
   offset: 0,
   mobile: true,
   live: true
});
wow.init();

配置

属性/方法 类型 默认值 说明
boxClass 字符串 ‘wow’ 需要执行动画的元素的 class
animateClass 字符串 ‘animated’ animation.css 动画的 class
offset 整数 0 距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效

Copyright © 2002-2021 虑色空间, All rights reserved.    备案号:粤ICP备19016513号