15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 H5

wow动画

孙正萌| 发布于 2021-10-20 10:25:11| 698阅读| 0点赞| 0评论
举报

动画效果


<p><strong>简介strong>p>
<p>有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。p>
<p><strong>浏览器兼容strong>p>
<p>IE10+ ✔ Chrome✔ Firefox ✔ Opera✔ Safari✔p>
<p>IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。p>
<p><strong>使用方法strong>p>
<p><strong>1、引入文件strong>p>
<p>p>
<p><strong>2、HTMLstrong>p>
<p>
<br />
p> <p>可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:<br />
<br />
p> <p><strong>3、wow使用strong>p> <p>class中必须要要包含wowp> <p>data-wow-duration:改变动画过程时间p> <p>data-wow-delay:延迟在动画开始之前p> <p>data-wow-offset:距离开始动画(元素距离浏览器底部bottom多高时开始动画)p> <p>data-wow-iteration:动画重复的次数p> <p><strong>4、JavaScriptstrong>p> <p>new WOW().init();p> <p>如果需要自定义配置,可如下使用:p> <p>var wow = new WOW({<br />    boxClass: 'wow',<br />    animateClass: 'animated',<br />    offset: 0,<br />    mobile: true,<br />    live: true<br /> });<br /> wow.init();p> <p><strong>配置strong>p> <table align="left" border="1" cellpadding="1" cellspacing="1" style="width:600px;"> <tbody> <tr> <td>属性/方法td> <td>类型td> <td>默认值td> <td>说明td> tr> <tr> <td>boxClasstd> <td>字符串td> <td>‘wow’td> <td>需要执行动画的元素的 classtd> tr> <tr> <td>animateClasstd> <td>字符串td> <td>‘animated’td> <td>animation.css 动画的 classtd> tr> <tr> <td>offsettd> <td>整数td> <td>0td> <td>距离可视区域多少开始执行动画td> tr> <tr> <td>mobiletd> <td>布尔值td> <td>truetd> <td>是否在移动设备上执行动画td> tr> <tr> <td>livetd> <td>布尔值td> <td>truetd> <td>异步加载的内容是否有效td> tr> tbody> table> div>
0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

孙正萌
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部