下载插件:animate下载
1. 页面引入插件
在你的index.html页面中引入这两个文件
- 1
- 2
2.写js代码
在js中写下面这句:
- 1
- 2
- 3
- 4
3. 在html页面中添加动画
在index.html页面中找到需要添加动画效果的对象。如果是一大块内容,就直接找最靠近它并且包围它的大盒子,给盒子添加类:class="wow 动画效果"
,具体参考下面代码:
bounce是动画效果,根据自己需要添加效果,参考:animate.css各种动画效果
- 1
- 2
- 3
属性:
data-wow-duration=”2s” 即:动画用2秒钟执行完。
data-wow-delay=”5s” 即:动画延迟5秒执行。
data-wow-offset=”10” 即: 距离可视区多远开始执行动画。
data-wow-iteration=”10” 即:重复次数。