前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >动画插件wow.js的使用方法

动画插件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/

代码语言:javascript
复制
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(动画执行次数)

代码语言:javascript
复制
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 删除

本文分享自 代码即数据 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档