使用scrollreveal.js，瀑布流页面滚动动画插件-CSDN博客

本文链接：https://blog.csdn.net/jyl4855/article/details/134966505

本文介绍了如何在Vue项目中使用scrollReveal.js创建滚动动画，包括两个自定义函数retBottomScroll和retScroll的配置，以及在.vue文件中的应用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

scrollReveal.js 是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件。

在utils文件夹下创建一个scroll.js文件

// 导出配置的scrollReveal 如果这个方法需要传参 记得要给他传参哦
// reveal()的类名可以为id (#reveal-top) 也可以为class(.reveal-top) 名称随意 并且也支持并集class写法 注意必须设置类否则无法使用
export  function retBottomScroll (data) {
  data.scrollReveal.reveal('.reveal-top', {
    // 动画的时长
    duration: 600,
    // 延迟时间
    delay: 300,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: 'bottom',
    // 回滚的时候是否再次触发动画
    reset: false,
    // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    // // useDelay: 'onload',
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: '10px',
    // 其他可用的动画效果
    opacity: 0.01,
    // 执行速度 线性函数啥的
    easing: 'cubic-bezier(0.5, 0, 0, 1)',
    // 执行方式（缩放）
    scale: 0.9,
    // 使用执行之前的回调函数
    beforeReveal: function (ele) {
       console.log(1);
     }
  })
}
export  function retScroll (data) {
  data.scrollReveal.reveal('.widget', {
    interval: 300,
    // 动画的时长
    duration: 600,
    // 延迟时间
    delay: 500,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: 'bottom',
    // 回滚的时候是否再次触发动画
    reset: false,
    // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    // useDelay: 'always',
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: '10px',
    // 其他可用的动画效果
    opacity: 0.01,
    // 执行速度 线性函数啥的
    easing: 'cubic-bezier(0.5, 0, 0, 1)',
    // 执行方式（缩放）
    scale: 0.9,
    // viewFactor: 0.1,
    container: document.documentElement,
    // useDelay: 'always',
    viewFactor: 0.5,
    // 使用执行之前的回调函数
    beforeReveal: function (ele) {
      //  console.log(1);
    },
  })
}

然后在.vue文件中的使用，直接加在class上。

<div class="item widget" v-for="item in cardList" :key="item">
            <div class="box">
              <img :src="item.img" alt="">
              <div class="boxTitle">{{ item.title }}</div>
              <p>{{ item.text1 }}</p>
              <p>{{ item.text2 }}</p>
              <p>{{ item.text3 }}</p>
              <p>{{ item.text4 }}</p>
            </div>
            <div class="setp">{{ item.setp }}</div>
          </div>

// 导入scrollReveal
import scrollReveal from 'scrollreveal'
// 导入配置的scrollReveal
import { retBottomScroll, retScroll } from '@/utils/scroll.js'
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'

const data = reactive({
  scrollReveal: scrollReveal(),
})


onMounted(() => {
  retBottomScroll(data)
  retScroll(data)
})