说明:animate管特效,wow是让用户滚动到位置触发特效
使用方法:
引入animate.css,wow依赖animate,所以必须提前引入,
<!-- head的css -->
<link rel="stylesheet" href="./lib/animate/css/animate.min.css">
<link rel="stylesheet" href="./lib/animate/css/mobile_animate.css">
js引入后,初始化wow
//js
<script src="./js/app.js"></script>
<script>
var wow = new WOW({
boxClass: 'wow', //设置类名
animateClass: 'animated',
offset: 20, //距离可视区
mobile: true, //移动端是否执行
live: true //异步加载
});
wow.init();
</script>
接下来是最坑的html部分,有自己css先写自己类名,再动画名(animete.css自己挑),最后写wow
<div class="two_attract00 wow">
Content to Reveal Here
</div>
<div class="history_item two_attract00 wow">
</div>
吐槽:官方文档辣鸡的一批,这还是我老老实实问同事问来的