了
解
红
点
最
新
动
态
和
行
业
资
讯
附件:https://www.hbhdhd.com/upfile/2019/01/20190111133507_432.rar
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
1、引入文件
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 | new WOW().init(); |
如果需要自定义配置,可如下使用:
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 | 异步加载的内容是否有效 |