HTML5 - Animate和Wow框架

---

开篇废话是一种情怀

• 本节主要介绍两款前端比较流行的框架, 后面还会有别的框架更新 !希望喜欢的朋友可以持续关注
• 这两款框架属于视觉效果类的，比较简单易懂．各位朋友如果有什么好的建议和心得可以留言，大家一起分享成长
• 总之，我是个喜欢开篇废话的＇程序猿＇，因为我希望自己是一个有情怀的人.

框架一 —-> Animate.css

• Animate.css是一个css动画样式库,可以减少我们的开发时间.它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出
  （fadeIn/fadeOut）等多达70多种动画特效，几乎包含了所有常用的动画特效。
• 重点: 主要是兼容各种浏览器,Animate的底层是靠css实现的,当然只兼容支持CSS3animate属性的浏览器: IE10+、Firefox、Chrome、Opera、Safari。
• 下载文件包链接：https://daneden.github.io/animate.css/

Animate.css的具体使用

引入文件

<link rel="stylesheet" href="animate.min.css">

给做动画的标签添加类名

<div class="box myAnimated flip"></div>

注意:

• 类 animated 的作用是控制动画的持续时间，是所有动画的前提条件， 在其后面的类则为动画的效果类。

---

框架二 —-> WOW.js

核心作用：让我们的页面滚动更有质感，更酷炫

• 通过WOW.js，可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果。也就是说：当我们向下滚动页面时，可以省去很多判断条件，让CSS动画逐渐展示出来。

特点

• 轻量级类库， 不依赖jQuery，超简单的安装和使用，与animate.css配合，只需要短短几行代码就可以实现很多特效。
• 容易定制，我们可以改变动画去设置喜欢的风格、延迟、长度、偏移和迭代等等。

兼容性问题

• 因为，WOW.js要和animate.css配合使用，所有其也只兼容支持CSS3 animate属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。

使用方法

• 引入文件

  <!-- Css文件 必须有这个animate文件的支持才能使用WOW -->
  <link rel="stylesheet" href="animate.min.css">
  <script src="wow.min.js"></script>

• 在相对的HTML标签中通过类名进行绑定

  <div class="wow slideInLeft"></div>
  <div class="wow slideInRight"></div>

• 然后在JavaScript文件中只需要一行初始化代码就搞定咯
  new WOW().init();

WOW.js常用的属性

• data-wow-delay: 动画开始前延迟
• data-wow-duration: 动画持续时间
• data-wow-iteration: 动画重复次数
• data-wow-offset: 距离浏览器底部到隐藏框顶部的距离（偏移量）

使用方法

• 可以加入 data-wow-duration (动画持续时间)和 data-wow-delay （动画延迟时间）等属性。

  <div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s"></div>
  <div class="wow slideInRight" data-wow-iteration="5"></div>

• data-wow-offset 图解

• WOW的默认配置参数,如果需要自定义配置,可手动修改

var wow = new WOW({
boxClass: 'wow', // 动画元素的CSS类（默认类名wow）
animateClass:'animated', // 动画CSS类 （默认类名animated）
offset: 0, // 距离可视区域多少开始执行动画（默认为0）
mobile: true, // 是否在移动设备上执行动画 （默认是true）
});

wow.init();

附Demo一个, 帮助更好的理解和使用 !

< ! ———- HTML ———— >

<div class="door">
    <div class="left wow slideInLeft"></div>
    <div class="right wow slideInRight"></div>
</div>

< ! ——— Style ————– >

<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style-type: none;
        }

        .door {
            width: 980px;
            margin: 100px auto;
            overflow: hidden;
            background: #fff;
        }

        div {
            width: 450px;
            height: 300px;
            background: #cccccc;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }
</style>

< ! ——— JavaScript ——- >

// 两行代码轻松实现
<script src="js/wow.min.js"></script>
<script>
    window.onload = function () {
        new WOW().init();
    }
</script>

< ! ——— 效果展示 ———- >

但是WOW.js实例的动画只能加载一次，如果要重新执行动画必须要进行刷新。

为了更好的解决这个问题,所以在下一次更新会引出第三个框架

---

未完待续 …