wow.js的使用方法

wow.js简介

功能:

  • 滚动页面, 显示css动画
  • 和animate.css配合使用
wow.js基本使用

基本使用方法

  • 导入animate.css
  • 导入wow.js
  • 在需要动画的元素上添加wow类名
  • 在需要动画的元素上添加动画类名
  • 在js中创建并初始化wow对象 new WOW().init();



    
    Title
    
    
    


wow设置动画属性
  • data-wow-duration 动画时长
  • data-wow-delay 动画延迟
  • data-wow-iteration 动画次数
  • data-wow-offset 当元素的顶部与浏览器底部的距离到达指定值的时候才显示并执行动画



    
    Title
    
    
    
    


wow js设置动画相关属性
  • boxClass : 动画元素的类名(默认为wow)
  • animateClass
  • offset 元素偏移(默认为0)
  • mobile 是否在移动设备上执行动画(默认为true)
  • live
  • callback 动画完成的回调(box属性为动画所在的dom元素)
  • scrollContainer



    
    Title
    
    
    
    


你可能感兴趣的:(wow.js的使用方法)