长图边滚动边加载动画

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。

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

相关推荐
再学一点就睡2 小时前
手写 Promise 静态方法:从原理到实现
前端·javascript·面试
再学一点就睡3 小时前
前端必会:Promise 全解析,从原理到实战
前端·javascript·面试
前端工作日常4 小时前
我理解的eslint配置
前端·eslint
前端工作日常4 小时前
项目价值判断的核心标准
前端·程序员
90后的晨仔4 小时前
理解 Vue 的列表渲染:从传统 DOM 到响应式世界的演进
前端·vue.js
OEC小胖胖5 小时前
性能优化(一):时间分片(Time Slicing):让你的应用在高负载下“永不卡顿”的秘密
前端·javascript·性能优化·web
烛阴5 小时前
ABS - Rhomb
前端·webgl
植物系青年5 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(下)
前端·低代码
植物系青年5 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(上)
前端·低代码
桑晒.5 小时前
CSRF漏洞原理及利用
前端·web安全·网络安全·csrf