WOW.js：依赖animate.js做页面滚动

图示

WOW、ScrollReveal：WOW.js和ScrollReveal.js基础学习_缩放

核心功能

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

特点

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

兼容性

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

官网

https://www.delac.io/wow/

如何使用？

  1. 基本用法

    // 引入文件
<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();

  2. 常用的属性

    data-wow-delay: 动画开始前延迟
data-wow-duration: 动画持续时长
data-wow-iteration: 动画重复次数
data-wow-offset: 距离浏览器底部到隐藏框顶部的距离（偏移量）
data-wow-offset：用于决定当前的元素在滚动的时候到达怎样的位置出现（是在滚动之前出现、滚动之后出现，还是滚动的时候出现）

    data-wow-offset = scroll + 浏览器高度 - 元素头部到文档顶部高度
    = 绿色 + 紫色 - 红色
    WOW、ScrollReveal：WOW.js和ScrollReveal.js基础学习_html_02

  3. WOW的默认配置参数

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

wow.init();

WOW.js存在怎样的问题？

  1. WOW.js实例的动画只能加载一次，如果要重新执行动画必须要进行刷新。
  2. 但是在实际开发中，更多时候动画是只加载一次，否则会造成视觉错乱。那如果要多次重复展现动画该如何处理呢？

WOW初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/animate.css">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }

        .box{
            width: 900px;
            margin: 20px auto;
            overflow: hidden;
            border: 1px solid red;
        }

        .box div{
            width: 450px;
            height: 300px;
        }

        .box div:nth-child(1){
            background-color: green;
            float: left;
        }

        .box div:nth-child(2){
            background-color: red;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wow flash"></div>
        <div class="wow flip"></div>
    </div>
<script src="js/wow.js"></script>
<script>
    window.addEventListener('load', function () {
        new WOW().init();
    });
</script>
</body>
</html>

WOW参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/animate.css">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }

        .box{
            width: 900px;
            margin: 20px auto;
            overflow: hidden;
            border: 1px solid red;
        }

        .box div{
            width: 450px;
            height: 300px;
        }

        .box div:nth-child(1){
            background-color: green;
            float: left;
        }

        .box div:nth-child(2){
            background-color: red;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wow slideInLeft" data-wow-delay="1s"></div>
        <div class="wow slideInRight" data-wow-duration="1s" data-wow-iteration="3"></div>
    </div>
<script src="js/wow.js"></script>
<script>
    window.addEventListener('load', function () {
        new WOW().init();
    });
</script>
</body>
</html>
scrollReveal.js

图示

WOW、ScrollReveal：WOW.js和ScrollReveal.js基础学习_缩放_03

基本概念

  1. scrollReveal是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；
  2. 官网
    ① https://scrollrevealjs.org/
    ② https://github.com/scrollreveal/scrollreveal

特点

scrollReveal同时兼容PC端和移动端
0依赖（不依赖于jQuery，也不依赖于animate.css）
定制性高，使用简单方便快捷

浏览器兼容

虽然scrollReveal.js不依赖于animate.css，但是它的动画也是用CSS3创建的，所以依然需要支持HTML5和CSS3比较好的浏览器，比如： IE10+、Firefox、Chrome、Opera、Safari。

使用方式

  1. 基本使用

    // 引入文件
<script src="js/scrollReveal.js"></script>

// html
<div class="box"></div>

// JavaScript
window.onload = function () {
    window.sr = ScrollReveal();
    sr.reveal('.box');
}

  2. 常用参数

     var config = {
     reset: false, // 滚动鼠标时，动画开关
     origin: 'bottom', // 动画开始的方向
     duration: 500, // 动画持续时间
     delay: 0, // 延迟
     rotate: {x:0, y:0, z:0}, // 过度到0的初始角度
     opacity: 0, // 初始透明度
     scale: 0.9, //缩放
     easing: 'cubic-bezier(0.6, 0.2, 0.2, 1)', // 缓动'ease', 'ease-in-out'，'linear'...

     // 回调函数
     beforeReveal: function(domEl){},
     beforeReset: function(domEl){},
     afterReveal: function(domEl){},
     afterReset: function(domEl){}
};

window.sr = ScrollReveal();
sr.reveal('.sr', config);

scrollReveal 和 WOW的区别和联系

它们都不依赖jQuery；
wow依赖于animate.css ，ScrollReveal不依赖任何其他插件或者库；
wow的释放动画，只能够实现一次，而ScrollReveal可以无限次使用；
ScrollReveal 参数相对比较多，比较复杂些；
实际工作中，用wow比较多。

scrollReveal 初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }

        ul{
            width: 980px;
            margin: 0 auto;
            overflow: hidden;
        }

        ul li{
            width: 200px;
            height: 300px;
            background-color: green;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
<ul>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
</ul>

<script src="js/scrollreveal.min.js"></script>
<script>
    window.onload = function () {
        ScrollReveal().reveal('.sr', {
            reset: true, // 滚动鼠标时，动画开关
            origin: 'right', // 动画开始的方向
            duration: 1000, // 动画持续时间
            delay: 0, // 延迟
            rotate: {x:0, y:0, z:0}, // 过度到0的初始角度
            opacity: 0.3, // 初始透明度
            scale: 0.4, //缩放
            easing: 'cubic-bezier(0.6, 0.2, 0.2, 1)', // 缓动'ease', 'ease-in-out'，'linear'...
            // 回调函数
            beforeReveal: function(domEl){},
            beforeReset: function(domEl){},
            afterReveal: function(domEl){},
            afterReset: function(domEl){}
        });
    }
</script>
</body>
</html>

利用ScrollReveal.js实现瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }

        .box{
            width: 1230px;
            margin: 0 auto;
            overflow: hidden;
        }

        .box>ul{
            width: 300px;
            float: left;
            margin-right: 10px;
        }

        .box>ul:last-child{
            margin-right: 0;
        }
    </style>
</head>
<body>
   <div class="box">
       <ul>
           <li class="sr"><img src="images/01.jpg" alt=""></li>
           <li class="sr"><img src="images/02.jpg" alt=""></li>
           <li class="sr"><img src="images/03.jpg" alt=""></li>
           <li class="sr"><img src="images/04.jpg" alt=""></li>
           <li class="sr"><img src="images/05.jpg" alt=""></li>
           <li class="sr"><img src="images/06.jpg" alt=""></li>
           <li class="sr"><img src="images/07.jpg" alt=""></li>
           <li class="sr"><img src="images/08.jpg" alt=""></li>
           <li class="sr"><img src="images/09.jpg" alt=""></li>
           <li class="sr"><img src="images/10.jpg" alt=""></li>
       </ul>
       <ul>
           <li class="sr"><img src="images/11.jpg" alt=""></li>
           <li class="sr man"><img src="images/12.jpg" alt=""></li>
           <li class="sr"><img src="images/13.jpg" alt=""></li>
           <li class="sr"><img src="images/14.jpg" alt=""></li>
           <li class="sr"><img src="images/15.jpg" alt=""></li>
           <li class="sr"><img src="images/16.jpg" alt=""></li>
           <li class="sr"><img src="images/17.jpg" alt=""></li>
           <li class="sr"><img src="images/18.jpg" alt=""></li>
           <li class="sr"><img src="images/19.jpg" alt=""></li>
           <li class="sr"><img src="images/20.jpg" alt=""></li>
       </ul>
       <ul>
           <li class="sr"><img src="images/21.jpg" alt=""></li>
           <li class="sr"><img src="images/22.jpg" alt=""></li>
           <li class="sr"><img src="images/23.jpg" alt=""></li>
           <li class="sr"><img src="images/24.jpg" alt=""></li>
           <li class="sr"><img src="images/25.jpg" alt=""></li>
           <li class="sr"><img src="images/26.jpg" alt=""></li>
           <li class="sr"><img src="images/27.jpg" alt=""></li>
           <li class="sr"><img src="images/28.jpg" alt=""></li>
           <li class="sr"><img src="images/29.jpg" alt=""></li>
           <li class="sr"><img src="images/30.jpg" alt=""></li>
       </ul>
       <ul>
           <li class="sr"><img src="images/31.jpg" alt=""></li>
           <li class="sr"><img src="images/32.jpg" alt=""></li>
           <li class="sr"><img src="images/33.jpg" alt=""></li>
           <li class="sr"><img src="images/34.jpg" alt=""></li>
           <li class="sr"><img src="images/35.jpg" alt=""></li>
           <li class="sr"><img src="images/36.jpg" alt=""></li>
           <li class="sr"><img src="images/37.jpg" alt=""></li>
           <li class="sr"><img src="images/38.jpg" alt=""></li>
           <li class="sr"><img src="images/39.jpg" alt=""></li>
           <li class="sr"><img src="images/40.jpg" alt=""></li>
       </ul>
   </div>
   <script src="js/scrollreveal.min.js"></script>
   <script>
       window.onload = function () {
           window.sr = ScrollReveal();
           sr.reveal('.sr', {
               reset: true, // 滚动鼠标时，动画开关
           });

           sr.reveal('.man', {
               reset: true, // 滚动鼠标时，动画开关
               origin: 'right', // 动画开始的方向
               duration: 500, // 动画持续时间
               delay: 500, // 延迟
               rotate: {x:100, y:100, z:100}, // 过度到0的初始角度
               opacity: 0.3, // 初始透明度
               scale: 3, //缩放
           })
       }
   </script>
</body>
</html>

利用ScrollReveal.js实现序列帧动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }

        .box{
            width: 980px;
            margin: 0 auto;
            overflow: hidden;
        }

        .box li{
            width: 50px;
            height: 50px;
            background-color: #ccc;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
<ul class="box">
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
</ul>
   <script src="js/scrollreveal.min.js"></script>
   <script>
       window.onload = function () {
           window.sr = ScrollReveal();
           sr.reveal('.sr', {
               reset: true, // 滚动鼠标时，动画开关
               origin: 'left', // 动画开始的方向
               duration: 500, // 动画持续时间
           }, 100);
       }
   </script>
</body>
</html>