建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

滚动页面时触发CSS 动画效果的js插件:WOW.js

来源:易助科技浏览量:125收藏

简介


在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。 该插件需要animate.css配合使用。


滚动页面时触发CSS 动画效果的js插件:WOW.js-示例图


属性


属性/方法类型默认值说明
boxClass字符串‘wow’‘wow’需要执行动画的元素的 class
animateClass字符串‘animated’‘animated’animation.css 动画的 class
offset整数0距离可视区域多少开始执行动画
mobile布尔值true是否在移动设备上执行动画
live布尔值true异步加载的内容是否有效



使用


1. 引入animate.css 、WOW.js文件


2. HTML


<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>


3. 调用


var wow = new WOW({
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 0,
  mobile: true,
  live: true
});

wow.init();


相关链接


官网地址 :  https://wowjs.uk/

GitHub 地址 :  https://github.com/topics/wow-js

Gitee地址 :https://gitee.com/mirrors/WOW.js