7.动画插件小合集

动画插件小合集

1. Animate.css
2. wow.js
3. scrollReveal

1. Animate.css

1. 概念
   其实swiper-animate就是参考Animate.css演变出来的一个插件,Animate.css和swiper-animate一样都是用于快速添加动画的,

2. Animate.css的使用
   1.引入animate.css的文件

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

         2.给需要执行动画的元素添加类名

//animated这个类名是animated.css的基类, 但凡需要通过animated.css来添加动画, 都需要添加这个基类
<div class="animated bounce infinite delay-3s">

2. wow.js

1. 概念
   WOW.js是对animate.css的扩充, 让页面滚动更有趣,通过WOW.js，可以在页面滚动的过程中逐渐释放动画效果。
   (wow.js + animate.css) 约等于 (swiper.js + swiper.animate.css)
   swiper更加强大, 企业中使用频率更高

2. wow.js的使用
   1.引入animate.css
   2.引入wow.js
   3.给需要执行动画的元素添加类名

test:自己的类名
wow:基类（可自定义）
slideInRight:动画效果（可自定义）
<div class="test wow slideInRight" data-wow-offset="600">我是第div</div>

         4.在JavaScript中初始化wow.js

 let wow = new WOW({
        boxClass:     'wow',      // 自定义基类的名称
        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();

3. scrollReveal

1. 概念
   scrollReveal是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次
2. scrollReveal特点
   1 .同时兼容PC端和移动端
   2 .0依赖（不依赖于jQuery，也不依赖于animate.css）
   3. 定制性高，使用简单方便快捷
   4. 和animte.css, WoW一样, 不支持低版本浏览器(IE10+)
3. scrollReveal的使用
   1.引入框架

 <script src="js/scrollreveal.js"></script>

2.搭建结构体

//很简单
<div>我是第1个div</div>
<div>我是第2个div</div>

3.创建ScrollReveal对象

 let sr = ScrollReveal({
        reset: true,
        duration: 5000,
        // delay: 5000,
        rotate: {x: 0, y: 0, z: 45},
        opacity: 0.5,
        scale: 2,
        distance: "500px",
        origin: "left",
        easing: "ease-in-out",
        beforeReveal: function (ele) {
            // 动画开始之前的回调
            // console.log("动画开始之前", ele);
        },
        afterReveal: function (ele) {
            // 动画结束之后的回调
            // console.log("动画结束之后", ele);
        },
        beforeReset: function (ele) {
            // 动画元素被重置之前的回到
            // console.log("动画元素被重置", ele);
        },
        afterReset: function (ele) {
            // 动画元素被重置之后的回到
            console.log("动画元素被重置", ele);
        },
    });

4.调用ScrollReveal对象的reveal方法, 将需要执行动画的元素给它

//将需要执行动画的div传给他
sr.reveal('div');

scrollReveal配置

1. reset boolean true / false元素是否在容器边界内来回滚动时都产生动画效果
2. duration number 500 动画持续时间，单位毫秒
3. delay number 0 动画的延迟时间，单位毫秒
4. rotate object/number { x: 0, y: 0, z: 0 } 开始的角度，单位degrees
5. opacity number 0 开始的透明度
6. scale number 0.9 开始的缩放值
7. distance string 可用任何CSS单位值，动画的距离
8. origin string ‘top’,’right’,’bottom’,’left’ 动画的方向
9. easing string ‘ease’ ‘ease-out’‘ease-in-out’‘ease-in-out’ 动画的easing效果，可以是任何有效的CSS easing值
10. beforeReveal 动画开始之前的回调
11. afterReveal 动画结束时放的回调
12. beforeReset 动画开始被重置
13. afterReset 动画重置结束
    （动画重置：执行动画的元素离开屏幕之后就会被重置
    重置就是重新设置为动画开始之前的默认样式）