js动画库(让网站动起来的js库)
js动画库(让网站动起来的js库)offset: 定义距底部还有多少距离时触发动画效果animateClass: 需要提供动画的库,默认是由 animate.css 提供可以针对时间、延时等一些配置做具体的修改<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>还可以通过js一些属性boxClass: 给需要动画效果的元素 设置的class名称,默认是"wow"
前言越来越多的网站特效很漂亮,其中就有一种我很喜欢的动画,就是当滑动到某个元素的时候,元素就是出现动画效果,如:缩放、旋转、滑动等。感觉很漂亮,之前在做企业站的时候,基本上都是自己手写的,有点麻烦而且效果也不是很好,最近发现了一款比较好用的动画库~~~~wow.js,可以轻松的网站具有这种特效。感受一下吧
安装使用Wow.js 的动画效果依赖于第三方库,官方推荐的是: Animate.css
当然也可以使用其它的动画库,需要配置一下 wowo.js。这里就以 Animate.css 为例展开介绍了。有兴趣的同学可以尝试使用一下其它的动画库。
- 引入动画库
<link rel="stylesheet" href="css/animate.css">
- 引入并且使用 wow.js
<script src="js/wow.min.js"></script>
<script> new WOW().init(); </script>
- 配置一下需要使用动画的元素,为元素的class属性添加一个名为 .wow 的class样式
<div class="wow"> Content to Reveal Here</div>
- 从 Animate.css 选择要使用的动画效果
<div class="wow bounceInUp"> Content to Reveal Here</div>
至此,就已经添加好了一个效果了
高级配置可以针对时间、延时等一些配置做具体的修改
<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>
还可以通过js一些属性
boxClass: 给需要动画效果的元素 设置的class名称,默认是"wow"
animateClass: 需要提供动画的库,默认是由 animate.css 提供
offset: 定义距底部还有多少距离时触发动画效果
mobile: 开启是否在手机上使用动画效果
wow = new WOW({
boxClass: 'wow' // default
animateClass: 'animated' // default
offset: 0 // default
mobile: true // default
live: true // default
}
)
wow.init();
开源协议
wow.js 使用的 MIT 开源协议,可以免费的使用,不过你的软件如果是有专利或者需要付费的,请记住在您的产品中包含MIT许可证的全部内容。
总结wow.js 是一款不错的js特效库,可以方便地给元素添加上滑动出现的效果。大大提高了网站的美观和交互性,并且降低了开发时间和成本。
关注我,分享给您实用的前端知识和优秀的组件库~~