WOW.js在页面滚动时展现动感的元素动画效果
插件描述:WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
使用方法:
1、引入文件
文件版本地址: https://www.bootcdn.cn/wow/
1 | < link rel = "stylesheet" href = "css/animate.min.css" >
|
2、HTML
1 2 | < div class = "wow slideInLeft" ></ div >
< div class = "wow slideInRight" ></ div >
|
可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:
1 2 | < 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、JavaScript
如果需要自定义配置,可如下使用:
1 2 3 4 5 6 7 8 | var wow = new WOW({
boxClass: 'wow' ,
animateClass: 'animated' ,
offset: 0,
mobile: true ,
live: true
});
wow.init();
|
配置
属性/方法 | 类型 | 默认值 | 说明 |
boxClass | 字符串 | ‘wow’ | ‘wow’需要执行动画的元素的 class |
animateClass | 字符串 | ‘animated’ | ‘animated’animation.css 动画的 class |
offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
mobile | 布尔值 | true | 是否在移动设备上执行动画 |
live | 布尔值 | true | 异步加载的内容是否有效 |
animate3.7.2 中的效果
div.wow animated + 以下效果 :
"bounce","flash","pulse","rubberBand","shake","swing","tada","wobble","jello","heartBeat","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","flip","flipInX","flipInY","flipOutX","flipOutY","lightSpeedIn","lightSpeedOut","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","slideInUp","slideInDown","slideInLeft","slideInRight","slideOutUp","slideOutDown","slideOutLeft","slideOutRight","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","hinge","jackInTheBox","rollIn","rollOut"