3.WOW
1.简介
官网:http://mynameismatthieu.com/WOW/
github:https://github.com/matthieua/WOW
1 核心作用:让页面滚动更有趣
通过WOW.js,可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果。也就是说:当我们向下滚动页面时,可以省去很多判断条件,让CSS动画逐渐展示出来。
2 特点
轻量级类库, 不依赖jQuery,超简单的安装和使用,与animate.css配合,只需要短短几行代码就可以实现很多特效。容易定制,我们可以改变动画去设置喜欢的风格、延迟、长度、偏移和迭代等等。
3 兼容性考虑
因为,WOW要和Animate配合使用,所有其也只兼容支持CSS3 animate属性的浏览器:IE10+、Firefox、Chrome、Opera、Safari。
2.最简单的使用
1.引入WOW和Animate
2.在布局中使用wow和animate
1.基本的布局
2.布局添加样式
3.JavaScript中进行初始化
3.WOW滚动案例
1.修改布局
执行效果:
2.修改item的动画
4.WOW的常用属性
data-wow-delay: 动画开始前延迟
data-wow-duration: 动画持续时长
data-wow-iteration: 动画重复次数
data-wow-offset: 浏览器底部到指定item的顶部的距离(偏移量)
来搞定它? 可以加入data-wow-duration(动画持续时间)和data-wow-delay(动画延迟时间)等属性。比如:
data-wow-offset:用于决定当前的元素在滚动的时候 , 到达怎样的位置出现(是在滚动之前出现、滚动之后出现,还是滚动的时候出现)http://mynameismatthieu.com/WOW/
1.探究data-x-offset意思
1.图解
2.布局代码
3.js代码
5.WOW的默认配置参数
var wow = new WOW({boxClass: 'wow', // 动画元素的CSS类(默认类名wow)animateClass:'animated', // 动画CSS类 (默认类名animated)offset: 0, // 距离可视区域多少开始执行动画(默认为0)mobile: true, // 是否在移动设备上执行动画 (默认是true)});wow.init();
6.WOW存在的问题
WOW.js实例的动画只能加载一次,如果要重新执行动画必须要进行刷新。
但是在实际开发中,更多时候动画是只加载一次,否则会造成视觉错乱。那如果要多次重复展现动画该如何处理呢?