WowJS:在滚动页面时添加动画效果的简单实现
jopen
9年前
之前介绍过，通过Animate.css可以让CSS动画添加起来像喝水一样容易
不过这种动画效果却是没法控制的，通过 WOW.js ，可以在向下滚动的过程中逐渐释放这些动画效果。
默认情况下，当你向下滚动页面时，可以逐渐展示出 CSS 动画。它一般使用 animate.css 的动画效果。但是，您可以轻松设置成您喜欢的动画库。
优点
比其他 JavaScript 视觉插件更轻量级，像 Scrollorama (这个太重了，其实我们的需求都是非常简单的)
超简单的安装，与 animate.css 配合，只需几行代码即可。
简单使用
HTML
当滚动到这两个secion时，其会分别从左/右滚出。
<section class="wow slideInLeft"></section> <section class="wow slideInRight"></section>
JavaScript
new WOW().init();
高级应用
可以改变标志class，默认为 'wow'，动画速度等
HTML
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section> <section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>
JavaScript
var wow = new WOW({ boxClass: 'wow', // animated element css class (default is wow) animateClass: 'animated', // animation css class (default is animated) offset: 0, // distance to the element when triggering the animation (default is 0) mobile: true, // trigger animations on mobile devices (default is true) live: true, // act on asynchronously loaded content (default is true) callback: function(box) { // the callback is fired every time an animation is started // the argument that is passed in is the DOM node being animated } }); wow.init();项目地址: https://github.com/matthieua/WOW
DEMO地址：http://mynameismatthieu.com/WOW/
来自：http://ourjs.com/detail/558fdaee20cbb7f655000012