动画插件

最新推荐文章于 2024-09-26 14:02:21 发布

小蚂蚁有力量

最新推荐文章于 2024-09-26 14:02:21 发布

阅读量293

点赞数

一、什么是Animate.css?

其实swiper-animate就是参考Animate.css演变出来的一个插件，Animate.css和swiper-animate一样都是用于快速添加动画的，所以会用swiper-animate就会用Animate.css；
Animate.css的使用: https://daneden.github.io/animate.css/
2.1引入animate.css的文件
2.2给需要执行动画的元素添加类名

二、WOW.JS使用(了解)

什么是WOW.js?
WOW.js是对animate.css的扩充, 让页面滚动更有趣；
通过WOW.js，可以在页面滚动的过程中逐渐释放动画效果；
简单点理解: (wow.js + animate.css) 约等于 (swiper.js + swiper.animate.css)；
只不过swiper更加强大, 企业中使用频率更高, 所以重点掌握swiper；
wow.js使用: https://www.delac.io/wow/
2.1引入animate.css
2.2引入wow.js
2.3给需要执行动画的元素添加类名
2.4在JavaScript中初始化wow.js

<head>
    <meta charset="UTF-8">
    <title>02-WOWJS使用</title>
    <style>
        *{
            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;
        }
    </style>
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/wow.js"></script>
</head>
<body>
<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>
<script>
new WOW().init();
</script>

二、WOW.JS高级使用

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

三、ScrollReveal.JS

什么是scrollReveal?
scrollReveal是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；
scrollReveal特点:
2.1 同时兼容PC端和移动端
2.2 0依赖（不依赖于jQuery，也不依赖于animate.css）
2.3 定制性高，使用简单方便快捷
2.4 和animte.css, WoW一样, 不支持低版本浏览器(IE10+)
使用步骤:
1.引入框架
2.搭建结构体
3.创建ScrollReveal对象
4.调用ScrollReveal对象的reveal方法, 将需要执行动画的元素给它
scrollReveal配置
reset boolean true / false 元素是否在容器边界内来回滚动时都产生动画效果
duration number 500 动画持续时间，单位毫秒
delay number 0 动画的延迟时间，单位毫秒
rotate object/number { x: 0, y: 0, z: 0 } 开始的角度，单位degrees
opacity number 0 开始的透明度
scale number 0.9 开始的缩放值
distance string 可用任何CSS单位值，如：’20px’, ’10vw’, ’5%’ 动画的距离（单位vw，相对于视口的宽度，视口被均分为100单位的vw）
origin string ‘top’,’right’,’bottom’,’left’ 动画的方向
easing string ‘ease’ ‘ease-out’‘ease-in-out’‘ease-in-out’ 动画的easing效果，可以是任何有效的CSS easing值
scrollReveal事件
beforeReveal 动画开始之前的回调
afterReveal 动画结束时放的回调
beforeReset 动画开始被重置
afterReset 动画重置结束

什么是动画重置?
执行动画的元素离开屏幕之后就会被重置
重置就是重新设置为动画开始之前的默认样式

<head>
    <meta charset="UTF-8">
    <title>05-ScrollRevealJS</title>
    <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>
    <script src="js/scrollreveal.js"></script>
</head>
<body>
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<div>我是第5个div</div>
<div>我是第6个div</div>

<script>

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);
        },
    });
    sr.reveal('div');
</script>

-End