WOW.js依赖animate.css, 所以它支持animate.css多达60多种动画效果。
浏览器兼容:IE9以及以前的版本不适用
使用方法:
1、引入文件
2、HTML
1,Make an element revealable
Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.
(You can change this CSS class in the WOW settings to avoid name conflicts.)
Content to Reveal Here
2,Choose the animation style
Pick an animation style inAnimate.css, then add the CSS class to the HTML element
Content to Reveal Here
可以加入data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:
data-wow-duration:Change the animation durationdata-wow-delay:Delay before the animation startsdata-wow-offset:Distance to start the animation (related to the browser bottom)data-wow-iteration:Number of times the animation is repeated
3、JavaScript
new WOW().init();
如果需要自定义配置,可如下使用:
var wow = new WOW({//以下都是默认值
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
boxClass:Class name that reveals the hidden box when user scrolls.
animateClass:Class name that triggers the CSS animations (’animated’ by default for the animate.css library)
offset:Define the distance between the bottom of browser viewport and the top of hidden box.
When the user scrolls and reach this distancethe hidden box is revealed.
mobile:Turn on/off WOW.js on mobile devices.
live:consatantly check for new WOW elements on the page.