在 vue3 中使用 ScrollReveal-资源分享- WEB程序开发笔记

在 vue3 中使用 ScrollReveal

原创
作者：phpEcho
发布时间：2023-07-25 23:41
标签： Javascript scrollreveal.js
浏览量：664

ScrollReveal 是一个 JavaScript 库，用于在元素进入/离开视口时轻松实现动画效果。本文介绍在 vue3 中如何使用它。

[TOC]

# 什么是 ScrollReveal

ScrollReveal 官网链接：[https://scrollrevealjs.org/](https://scrollrevealjs.org/)

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

先看个入门示例：
![](https://cnd.51blog.xyz/images/scrollreveal-demo.gif)

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

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

# 安装

- npm 安装
  ```bash
  npm install scrollreveal --save
  ```
- pnpm 安装（推荐）
  ```bash
  pnpm add scrollreveal
  ```

# 使用介绍

下面就展示上文的示例完整代码：
```vue
<template>
  <div>
    <h1>ScrollReveal 演示demo</h1>
    <div class="item" v-for="item in items" :key="item" :style="{ backgroundColor: item.bgColor }">
      {{ item.id }}
    </div>
  </div>
</template>

const items = ref<any>([])
for (let i = 1; i <= 100; i++) {
  items.value.push({
    id: i,
    bgColor: RandomColorGenerator({ format: 'HEX' })
  })
}

onMounted(() => {
  ScrollReveal().reveal('.item', {
    reset: true,
    distance: '50px',
    origin: 'left',
    interval: 80,
    opacity: 0.1,
    rotate: {
      x: 20,
      z: 20
    },
    scale: 0.6
  })
})
</script>

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

WEB程序开发笔记

在 vue3 中使用 ScrollReveal

文章归档

推荐文章

热门标签

友情链接