长图边滚动边加载动画

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.jsanimate.css
data-wow-duration: 动画持续时间
data-wow-delay: 动画开始前的延迟
data-wow-offset: 开始动画的距离(与浏览器底部相关)
data-wow-iteration: 动画的次数重复(无限次:infinite)

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

至此,一个基本的长图一边手动滚动,一边加载动画的效果就完成了。

相关推荐
JSLove4 分钟前
常见 npm 报错问题
前端·npm
sunbyte4 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子5 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua9 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
嘗_25 分钟前
暑期前端训练day5
前端
uncleTom66631 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥34 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF1 小时前
如何 测试Labview是否返回数据 ?
前端
Spider_Man1 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬1 小时前
理解JS事件环(Event Loop)
前端·javascript