设置WOW.js
1.引入css动画库
<link rel="stylesheet" href="css/animate.css">
2.引入wow.js并且初始化
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
显示CSS动画
1.设置css类
将CSS类.wow添加到HTML元素:在用户滚动显示它之前,它将是不可见的。
<div class="wow">
Content to Reveal Here
</div>
2.选择动画类型
在Animate.css中选择一个动画样式,然后将CSS类添加到HTML元素中。
<div class="wow bounceInUp">
Content to Reveal Here
</div>
高级选项
data-wow-duration: 更改动画持续时间
data-wow-delay: 动画开始前的延迟
data-wow-offset: 开始动画的距离(与浏览器底部相关)
data-wow-iteration: 动画重复的次数
<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>
自定义设置
boxClass: 用户滚动时显示隐藏框的类名。
animateClass: 触发CSS动画的类名(animate.css库默认为'animated')
offset: 定义浏览器视口底部与隐藏框顶部之间的距离。当用户滚动并到达该距离时,隐藏的框被显示出来。
mobile: 在移动设备上打开/关闭WOW.js。
live: 在页面上不断检查新的WOW元素。
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();
网友评论