wow.js使用方法 css页面滚动动画

css 页面滚动动画 wow.js

页面根据滚动条变化展现动画

• 官网链接 https://www.delac.io/wow/
• 使用时需要引入wow.js或wow.min.js 以及animate.css或者animate.min.css
• 文件下载链接https://github.com/matthieua/WOW

使用方法

• 引入文件，初始化

  <link rel="stylesheet" type="text/css" href="css/animate.min.css">   
  <script type="text/javascript" src="js/wow.min.js"></script>
  <script type="text/javascript">
     new WOW().init();
  </script> 
  

• 在class中加入类名 元素必须设置为块状或者行内块状

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

• 属性值
  data-wow-duration：动画持续时间
  data-wow-delay：动画延迟时间
  data-wow-iteration：动画次数 //无限次infinite

• animate动画库链接 https://animate.style（超多动画任选）