让css3动画变得有趣wowjs

作者 : 开心源码 本文共2882个字,预计阅读时间需要8分钟 发布时间: 2022-05-12 共39人阅读
  • wowjs可以在网页滚动时, 展现css动画,是animater的好朋友, wowjs官方实例演示链接: https://mynameismatthieu.com/WOW/

animate.css 包含了一组炫酷、有趣、跨浏览器的动画,可以在你的项目中直接用。

用方法

1. 在页面头部引入, animate.csswow.js, cdn地址如下:

<link href=”https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css” rel=”stylesheet”>
<script src=”https://cdn.bootcss.com/wow/1.1.2/wow.min.js”></script>

2. 在需要增加动画的html元素上, 新添加两个类属性, 第一个为wow, 第二个为动画名如从左侧滑入slideInLeft

<p class=”wow slideInLeft”>从左边滑入的动画</p>

3. 增加动画控制, 主要控制四个属性:

  • data-wow-duration: 动画持续时间
  • data-wow-delay: 动画开始之前的推迟播放的时间
  • data-wow-offset: 元素距离底部大于此数值时,开始播放动画
  • data-wow-iteration: 动画重复的次数
<!--动画持续时间为2秒, 动画开始之前的推迟播放的时间为5s 元素底部距离浏览器底部400像素时开始播放动画, 动画重复次数为2次--><p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="400" data-wow-iteration="2">从左边滑入的动画</p>

4. 在html底部增加初始化语句

<script>    wow = new WOW(        {            boxClass: 'wow',      // 默认属性名            animateClass: 'animated', // 默认触发的动画类(包含在animate css中)            offset: 0,          // 为所有增加wow的元素设置 data-wow-delay属性 的默认值            mobile: true,       // 能否在移动设施中开启动画            live: true        // 持续监测页面中能否插入新的wow元素        }    );    wow.init();</script>

小技巧: 在animater中大多数动画名都是”见名知意”的, 在这里可以在线查看: https://cdn.bootcss.com/animate.css/3.5.2/animate.css, 具体使用法可以查看下面简单的小demo

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>wow动画</title>    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">    <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script></head><style>    p {        font-size: 50px;        text-align: center;        color:#64B587;        line-height: 100px;    }    section {        width: 800px;        font-size: 30px;        color: #A84631;        text-align: center;        line-height:60px;        margin: 0 auto;    }    section div {        height: 100px;        line-height: 100px;    }</style><body><p class="wow slideInLeft">    将进酒</p><section >    <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1s">        君不见黄河之水天上来,奔流到海不复回。<br>    </div>    <div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s">        君不见高堂明镜悲白发,朝如青丝暮成雪。<br>    </div>    <div class="wow bounceOutUp" data-wow-duration="2s" data-wow-delay="1s">        人生得意须尽欢,莫使金樽空对月。<br>    </div>    <div class="wow fadeIn">        天生我材必有使用,千金散尽还复来。<br>    </div>    <div class="wow fadeInDown">        烹羊宰牛且为乐,会须一饮三百杯。<br>    </div>    <div class="wow fadeInLeft">        岑夫子,丹丘生,将进酒,杯莫停。<br>    </div>    <div class="wow fadeInLeftBig">        与君歌一曲,请君为我倾耳听:<br>    </div>    <div class="wow fadeOutRightBig">        钟鼓馔玉不足贵,但愿长醉不复醒。<br>    </div>    <div class="wow flipInX">        古来圣贤皆寂寞,惟有饮者留其名。<br>    </div>    <div class="wow flipOutY">        陈王昔时宴平乐,斗酒十千恣欢谑。<br>    </div>    <div class="wow lightSpeedIn">        主人何为言少钱,径须沽取对君酌。<br>    </div>    <div class="wow rotateIn">        五花马,千金裘,<br>    </div>    <div class="wow rotateInUpLeft">        呼儿将出换美酒,与尔同销万古愁。<br>    </div></section><!--动画持续时间为2秒, 动画开始之前的推迟播放的时间为5s 元素底部距离浏览器底部400像素时开始播放动画, 动画重复次数为2次--><p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="400" data-wow-iteration="2">End</p></body><script>    wow = new WOW(        {            boxClass: 'wow',      // 默认属性名            animateClass: 'animated', // 默认触发的动画类(包含在animate css中)            offset: 0,          // 为所有增加wow的元素设置 data-wow-delay属性 的默认值            mobile: true,       // 能否在移动设施中开启动画            live: true        // 持续监测页面中能否插入新的wow元素        }    );    wow.init();</script></html>

小结:

animater可以添加网页的动感效果,动画的效果和ppt相似, 假如你肯花时间, 使用animater做出好看的在线ppt效果也是完全可以做到的~

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 让css3动画变得有趣wowjs

发表回复