动画插件wow.js的使用方法

2019-03-18  本文已影响0人  EverglowLyu

Github地址: https://github.com/daneden/animate.css
体验地址:https://daneden.github.io/animate.css/
wow.js:https://www.delac.io/wow/

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>

data-wow-duration(动画持续时间);data-wow-delay(动画延迟时间);data-wow-offset(元素的位置露出后距离底部多少像素执行);data-wow-iteration(动画执行次数)

js
<script type="text/javascript">
    var wow = new WOW({
    boxClass: 'wow', //‘wow’需要执行动画的元素的 class
    animateClass: 'slideInLeft',//‘slideInLeft’animation.css 动画的 class
    offset: 0,//距离可视区域多少开始执行动画
    mobile: true,//是否在移动设备上执行动画
    live: true  //异步加载的内容是否有效
    });
    wow.init();
    // new WOW().init();不需要自己配置时加入的js
</script>
上一篇 下一篇

猜你喜欢

热点阅读