Animate.css 动画及页面滚动时触发动画的wow.js

Animate.css

• 安装 npm install animate.css --save 或 bower install animate.css --save
• 或通过 CDN 添加
• 给目标对象添加一个 class 属性值animated ，也可以添加一个无限循环的class属性值infinite
• 最后给目标元素添加要实现的动画名称添加到class属性值 参见 Animate.css
• 也可以和jquery结合做好多事，$(#yourid).addClass('animated bounce')
• 改变动画持续时间，延时，播放次数

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

确保用适用的供应商前缀（webkit，moz等）替换CSS中的vendor

WOW.js

• 导入animat.css,或者通过修改WOW.js的设置连接到其他的动画库
• 在<script> 标签中添加 new WOW().init();
• 在目标元素上添加classs属性值wow animate动画名称 在滚动到显示它之前一直隐藏自己
• 高级选项

data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
data-wow-iteration: Number of times the animation is repeated

• 自定义

boxClass: 用户滚动时显示隐藏框的类名称(默认 'wow') ***CSS .wow { visibility: hidden; }***

animateClass:触发CSS动画的类名（animate.css库默认为'animated'）

offset: 定义浏览器视口底部和隐藏框顶部之间的距离。 当用户滚动并达到这个距离时，显示隐藏的盒子。(默认 0)

mobile: 在移动设备上打开/关闭WOW.js. (默认true)

live: 作用于异步加载的内容（默认为true）

callback : function(box){
     
     } 每次动画开始都触发，参入参数为正在动画的DOM节点

scrollContainer: null // 可选的滚动容器选择器，否则使用窗口