ScrollReveal 滚动元素进入/离开视口时制作动画

如题，使用 ScrollReveal ，实现元素进入可视范围后，制作动画出现，类似懒加载动画

安装

也是两种方式，也不用多介绍了，各取所需

<script src="https://unpkg.com/scrollreveal"></script>

npm install scrollreveal

使用

我是vue项目npm安装，需要引入，引入后直接使用 ScrollReveal 实例即可

使用 .reveal() 给元素加上动画 ，第一个参数 是 需要添加动画的元素 （选择器，dom），第二个参数是配置对象

<div class="text">main</div>

import ScrollReveal from "scrollreveal";

ScrollReveal().reveal(".text",{delay:500,distance:'100px'});

第一个参数也接收dom数组：

var node = document.querySelector('#one');
var nodeList = document.querySelectorAll('.one');
var nodeArray = [
    document.querySelector('#one'),
    document.querySelector('#two'),
    document.querySelector('#thr')
];

ScrollReveal().reveal(node);
ScrollReveal().reveal(nodeList);
ScrollReveal().reveal(nodeArray);

ScrollReveal 还有三个方法，清除单个动画监听 clean，清除所有 destroy，添加异步sync。一般来说我们会使用到 clean

ScrollReveal().clean('.items');

另外两个如果需要可以查看官网

Constructor — ScrollReveal (scrollrevealjs.org)

常用配置项

    ScrollReveal().reveal(".text",{
        delay:500, // 延时时间
        distance:'100px', // 初始偏移距离
        duration: 500, // 持续时间
        easing: 'ease-in', // 动画速率  (快到慢，慢到快等等)
        opacity: 0, // 初始透明度
        origin: 'top', // 初始位置 (例：top，盒子从上到下出现)
        rotate: {x: 40,y:20,z: 20}, // 旋转偏移
        scale: 0 // 初始缩放大小
        });

 最后有想深入了解的可以去官方查看文档：

ScrollReveal (scrollrevealjs.org)