WOW.js动画插件

有的页面在向下滚动的时候，有些元素会产生细小的动画效果。比如需要做到滚动条滑到某个位置时，才能显示动画。wow.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

IE6、IE7 等老浏览器不支持 CSS3动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

使用wow.js这个插件（实现页面动画效果），提高前端开发效率

动画演示：

WOW.js – 让页面滚动更有趣_dowebok

下载：

mirrors / matthieua / WOW · GitCode

使用npm包管理工具，下载:

 npm install wowjs

下载完成后，我们把 node_modules目录下的 对应的js文件和css样式表文件 拿出来，放置到你当前项目的指定目录下，然后，在你当前项目中去使用。

animate.css中文官网地址：

Animate中文网 – Animate安装、Animate使用、Animate下载

使用方法：

1、wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css。

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

2、在最底部或引入的css下面引用wow.js或者wow.min.js，然后再下面再写一行javascript代码。（无需引用jquery）

 <script src="./js/wow.min.js"></script>

3、写html代码（必须设置为块状或者行内块状），并添加class类名。

在页面中，我们使用旧版本的animate.css即可。

旧版本的animate.css 的类名引入：

   <section class="wow slideInLeft">小马过河</section>
    <section class="wow slideInRight">小马过河</section>

新版本的animate.css的类名引入：

在类名的前面要加 前缀animate__

 <section class="wow animate__slideInRight">小马过河</section>
    <section class="wow animate__backOutRight">小马过河</section>

预览：

另外可以加入 data-wow-duration（动画持续时间）、 data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）、data-wow-iteration（动画执行次数）属性 （可选可不选）

* {
        margin: 0;
        padding: 0;
    }

    body {
        overflow-x: hidden;
        font-family: "Microsoft Yahei";
    }

    body h1 {
        width: 100%;
        margin: 80px 0;
        font-size: 50px;
        font-weight: 500;
        text-align: center;
    }

    body .txt {
        margin: 80px 0;
        font-size: 16px;
        text-align: center;
    }

    .dowebok {
        margin: 0 auto;
    }

    .dowebok ul {
        list-style-type: none;
    }

    .dowebok .row {
        font-size: 0;
        text-align: center;
    }

    .dowebok .wow {
        display: inline-block;
        width: 280px;
        height: 280px;
        margin: 30px 15px 0;
        border-radius: 50%;
        font: 30px/280px "Microsoft Yahei";
        vertical-align: top;
        *display: inline;
        zoom: 1;
    }

    .bg-green {
        background: #5bd5a0;
    }

    .bg-blue {
        background: #1daee9;
    }

    .bg-purple {
        background: #c843a5;
    }

    .bg-red {
        background: #eb3980;
    }

    .bg-yellow {
        background: #ffcc35;
    }

<div class="dowebok">
        <div class="row">
            <div class="wow rollIn bg-blue"></div>
            <div class="wow bounceInDown bg-green">WOW.js</div>
            <div class="wow lightSpeedIn bg-purple"></div>
        </div>

        <div class="row">
            <div class="wow rollIn bg-yellow" data-wow-delay="0.5s">简单易用</div>
            <div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
            <div class="wow bounceInRight bg-blue">轻量级</div>
        </div>

        <div class="row">
            <div class="wow bounceInLeft bg-green"></div>
            <div class="wow flipInX bg-purple">WOW.js</div>
            <div class="wow bounceInRight bg-yellow"></div>
        </div>

        <div class="row">
            <div class="wow rollIn bg-blue">无需 jQuery</div>
            <div class="wow shake bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
            <div class="wow swing bg-purple" data-wow-iteration="2">纯 JS</div>
        </div>

        <div class="row">
            <div class="wow rollIn bg-red"></div>
            <div class="wow bounceInU bg-yellow" data-wow-delay="0.5s">WOW.js</div>
            <div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="0.15s"></div>
        </div>

        <div class="row">
            <div class="wow bounceInLeft bg-purple">依赖 animate.css</div>
            <div class="wow pulse bg-blue" data-wow-iteration="5" data-wow-duration="0.25s"></div>
            <div class="wow lightSpeedIn bg-yellow">多种动画</div>
        </div>

        <div class="row">
            <div class="wow bounce bg-green" data-wow-iteration="5" data-wow-duration="0.15s"></div>
            <div class="wow bounceInUp bg-red">WOW.js</div>
            <div class="wow bounceInRight bg-purple"></div>
        </div>

        <div class="row">
            <div class="wow rollIn bg-red" data-wow-delay="0.5s">无需 jQuery！？</div>
            <div class="wow bounceInDown bg-green" data-wow-delay="1s"></div>
            <div class="wow bounceInRight bg-yellow" data-wow-delay="1.5s">谢谢</div>
        </div>
    </div>

 

 <script src="./js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>

 预览：