当遇到喜欢交互动画的客户，我们通常会搭配「wow.js」 + 「animate.js」等JavaScript库来实现效果，而「animate.js」页面滚动到元素位置时触发动画效果，但只能触发一次，再次滚动到元素位置时则无效果。

那么我们可以使用「scrollreveal.js」来实现无限触发动画，来看介绍：

ScrollReveal 是一个 JavaScript 库，用于在用户滚动页面时呈现动画效果。它使得网页元素可以在用户滚动到特定位置时逐渐显示或以其他动画形式呈现，从而增强网页的交互性和视觉吸引力。

使用方法

1、引入JS

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

2、初始化配置项

// 定义当前默认的效果
const sr = ScrollReveal({
    origin: 'bottom',   // 元素初始位置
    distance: '20px',   // 元素移动的距离
    duration: 1000,     // 动画持续时间
    delay: 200,         // 延迟时间
    easing: 'cubic-bezier(0.5, 0, 0, 1)', // 缓动函数
    opacity: 0,         // 元素初始透明度
    scale: 1,           // 元素初始缩放
    reset: false,       // 动画重复时是否重置
    mobile: false       // 在移动设备上是否启用
});

3、定义元素动画效果：

sr.reveal('.column-6:first-of-type', {
    origin: 'left',
    distance: '700px'
});
sr.reveal('.column-6:last-of-type', {
    origin: 'right',
    distance: '700px'
}))

PS：这里覆盖初始化的配置项，动画效果可以定义多个。

4、效果：

通过预览图看到，来回滚动可以无限触发动画。

官网：https://scrollrevealjs.org/