动画插件--WOWJS

一、 WOW.js的基本使用

1.1 什么是WOW.js?

WOW.js是对animate.css的扩充, 让页面滚动更有趣

通过WOW.js，可以在页面滚动的过程中逐渐释放动画效果

简单点理解: (wow.js + animate.css) 约等于  (swiper.js + swiper.animate.css)

只不过swiper更加强大, 企业中使用频率更高, 所以重点掌握swiper

1.2 wow.js使用

1. 引入animate.css
2. 引入wow.js
3. 给需要执行动画的元素添加类名
4. 在JavaScript中初始化wow.js

1.3 示例

        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .box1{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: blue;
            float: right;
        }

    <link rel="stylesheet" href="css/animate.css">
    <script src="js/wow.js"></script>

<div class="box">
    <!--
    wow这个类名是一个基类, 如果想通过wow.js添加动画, 那么就必须写上这个基类
    这里的slideInLeft就是Animate.css中的动画名称, 只要是Animate.css中的动画再wow.js中都可以使用
    -->
    <div class="box1 wow slideInLeft" data-wow-duration="5s"></div>
    <div class="box2 wow slideInRight" data-wow-delay="5s" data-wow-iteration="2"></div>
</div>

new WOW().init();

---

二、WOW.js位置计算

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 800px;
            margin: 0 auto;
            border: 1px solid #000;
            overflow: auto;
            overflow-x: hidden;
            background: #fff !important;
        }
        div{
            width: 400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            margin: 0 auto;
        }
        div:nth-child(odd){
            background: red;
        }
        div:nth-child(even){
            background: blue;
        }
    </style>
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/wow.js"></script>

<div class="box">
    <div class="wow slideInLeft">我是第1个div</div>
    <div class="wow slideInRight">我是第2个div</div>
    <div class="wow slideInLeft">我是第3个div</div>
    <div class="test wow slideInRight" data-wow-offset="600">我是第4个div</div>
    <div>我是第5个div</div>
    <div>我是第6个div</div>
    <div>我是第7个div</div>
    <div>我是第8个div</div>
    <div>我是第9个div</div>
    <div>我是第10个div</div>
    <div>我是第11个div</div>
    <div>我是第12个div</div>
    <div>我是第13个div</div>
    <div>我是第14个div</div>
    <div>我是第15个div</div>
    <div>我是第16个div</div>
    <div>我是第17个div</div>
    <div>我是第18个div</div>
    <div>我是第19个div</div>
    <div>我是第20个div</div>
    <div>我是第21个div</div>
    <div>我是第22个div</div>
    <div>我是第23个div</div>
    <div>我是第24个div</div>
    <div>我是第25个div</div>
    <div>我是第26个div</div>
    <div>我是第27个div</div>
    <div>我是第28个div</div>
    <div>我是第29个div</div>
    <div>我是第30个div</div>
</div>
<script>
    // 1.拿到window的高度
    let windowHeight = window.innerHeight;
    // console.log(windowHeight);

    // 2.拿到元素距离body的偏移位
    let oDiv = document.querySelector(".test");
    let divOffsetTop = oDiv.offsetTop;
    // console.log(divOffsetTop);

    // 3.拿到网页滚动出去的距离
    window.onscroll = function () {
        let offsetTop = document.documentElement.scrollTop;
        // (window的高度 + 网页滚动出去的距离) - 元素距离body的偏移位
        let result = (windowHeight + offsetTop) - divOffsetTop;
        console.log(result);
    }

    let wow = new WOW({
        /*告诉wow.js, data-wow-offset参数谁进行计算偏移位*/
        scrollContainer: ".box"
    });
    wow.init();
</script>

---

三、WOW.js高级使用

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            margin: 0 auto;
        }
        div:nth-child(odd){
            background: red;
        }
        div:nth-child(even){
            background: blue;
        }
    </style>
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/wow.js"></script>

<div class="lwj slideInLeft">我是第1个div</div>
<div class="lwj slideInRight">我是第2个div</div>
<div class="lwj slideInLeft">我是第3个div</div>
<div class="test lwj slideInRight" data-wow-offset="600">我是第4个div</div>
<div>我是第5个div</div>
<div>我是第6个div</div>
<div>我是第7个div</div>
<div>我是第8个div</div>
<div>我是第9个div</div>
<div>我是第10个div</div>
<div>我是第11个div</div>
<div>我是第12个div</div>
<div>我是第13个div</div>
<div>我是第14个div</div>
<div>我是第15个div</div>
<div>我是第16个div</div>
<div>我是第17个div</div>
<div>我是第18个div</div>
<div>我是第19个div</div>
<div>我是第20个div</div>
<div>我是第21个div</div>
<div>我是第22个div</div>
<div>我是第23个div</div>
<div>我是第24个div</div>
<div>我是第25个div</div>
<div>我是第26个div</div>
<div>我是第27个div</div>
<div>我是第28个div</div>
<div>我是第29个div</div>
<div>我是第30个div</div>
<script>
    let wow = new WOW({
        boxClass:     'lwj',      // 自定义基类的名称
        animateClass: 'animated', // 指定需要使用的动画库的名称
        offset:       0,          // 在全局统一的设置元素的data-wow-offset
        mobile:       true,       // 在移动端是否需要执行动画
        live:         true,       // 是否需要开启异步加载内容
        callback:     function(box) {
            // 只要有元素执行动画就会调用这个回调函数, 并且会将正在执行动画的元素传递给我们
            console.log(box);
        },
        /*告诉wow.js, data-wow-offset参数谁进行计算偏移位*/
        scrollContainer: ".box",
    });
    wow.init();
</script>