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

lyudev

发布于 2022-08-04 10:53:32

2.3K0

发布于 2022-08-04 10:53:32

文章被收录于专栏：代码即数据

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>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-02-25，如有侵权请联系 cloudcommunity@tencent.com 删除

https