现在很多网页都有个炫酷的特效:滚动页面时会展示各式各样的动画效果。WOW.js 可帮你实现这种 CSS3 动画效果,通过设置调整可以改变动画的风格、延迟、偏移量等。我现在用的 Begin主题 就在使用这个特效,只是添加了首屏展示的元素不加载动画。
效果演示
WOW.js下载
使用方法:
1、引用动画样式文件Animate.css
- <link rel=“stylesheet” href=“css/animate.css”>
2、加载激活WOW.js
- <script src=“js/wow.min.js”></script>
- <script>
- new WOW().init();
- </script>
可选择参数:
- wow = new WOW({
- boxClass: ‘wow’, // default
- animateClass: ‘animated’, // default
- offset: 0, // default
- mobile: true, // default
- live: true // default
- })
- wow.init();
其中:
boxClass
WOW.js需要执行动画的元素的 class
animateClass
animated’animation.css 动画的 class
offset
距离可视区域多少开始执行动画
mobile
是否在移动设备上执行动画默认:true,可选:false
live
异步加载的内容是否有效,默认:true,可选:false
3、为HTML添加专有class
- <div class=“wow slideInLeft”></div>
- <div class=“wow slideInRight”></div>
其中:
slideInLeft和slideInRight分别代表方式,可以改为fadeInUp和fadeInDown等实现不同的动画效果。
还可以这样写:
- <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>
通过添加参数调整动画效果。
data-wow-duration
改变动画时间
data-wow-delay
延迟在动画开始之前
data-wow-offset
距离开始动画(有关浏览器底部)
data-wow-iteration
动画重复的次数
亲爱的:若该文章解决了您的问题,可否收藏+评论+分享呢?
文章评论 本文章有个评论