长图边滚动边加载动画

快乐星球喂2025-06-04 16:06

1、背景

想要做一个酷炫的公司简介，使用一个长图介绍，可以一边滚动一边动态展示动画，让静态的页面看起来非常灵动。

2、技术路径

wow.js+animate.css

3、具体实现

(1)安装插件

js 复制代码

npm install wow.js --save

npm install animate.css --save

注意：安装时候版本有依赖，验证下来 "animate.css": "3.5"和"wowjs": "^1.1.3"是生效的。

（2）全局注册

main.js 复制代码

import 'animate.css'
import WOW from 'wowjs'

// 添加 WOW 实例到全局属性
app.config.globalProperties.$wow = new WOW.WOW({
  boxClass: 'wow',      // 默认类名
  animateClass: 'animated', // 默认动画类名前缀
  offset: 100,            // 距离视口多少像素时触发
  mobile: true,         // 是否在移动设备上启用
  live: true ,           // 对异步加载的内容是否有效
})

(3)页面引入和使用

初始化

index.js 复制代码

export default {
  name: "Index",
  data() {},
  created() {
  },
  mounted() {
    this.$wow.init()
  },
  methods: {}
}

在元素上直接写动画效果

index.vue 复制代码

<template>
  <div>
      <div class="zeroBgs">
      ....
      </div>
      <div class="oneBgs">
      <img src="../../assets/images/1-li1.png" data-wow-delay="0.1s" data-wow-offset="50" class="img-1-li1 wow fadeInRight" />
        <img src="../../assets/images/1-li2.png" data-wow-delay="0.1s" data-wow-offset="50" class="img-1-li2 wow fadeInLeft" />
        <img src="../../assets/images/1-li3.png" data-wow-delay="0.1s" data-wow-offset="50" class="img-1-li3 wow fadeInRight" />
        ....
      </div>
      ...

   </div>
 </template>

具体使用注意事项官网描述比较详细wow.js和animate.css
data-wow-duration： 动画持续时间
data-wow-delay： 动画开始前的延迟
data-wow-offset： 开始动画的距离（与浏览器底部相关）
data-wow-iteration： 动画的次数重复（无限次：infinite）

具体动画效果可以看animate.css
注意：使用动画样式的时候需要带wow样式，即class类样式中需要包含wow。