在 vue3 中使用 ScrollReveal

什么是 ScrollReveal

ScrollReveal 官网链接：https://scrollrevealjs.org/

ScrollReveal 是一个 JavaScript 库，用于在元素进入/离开视口时轻松实现动画效果。

先看个入门示例：

ScrollReveal 需要使用 CSS Transition 和 CSS Transform 来创建动画。现如今全球超过 94% 的浏览器都支持这两个功能。

另外，该库设计得既稳健又灵活，而且易用。

安装

• npm 安装

  npm install scrollreveal --save
  

• pnpm 安装（推荐）

  pnpm add scrollreveal
  

使用介绍

下面就展示上文的示例完整代码：

拓展：
上面代码示例中使用了一个生成随机颜色依赖 RandomColorGenerator，安装命令 npm i random-color-creator 或 pnpm add random-color-creator