vue-cli项目中用vue2引用中scrollreveal结合animate.css完成动画实例

1. 安装scrollreveal和animate.css

npm install scrollreveal animate.css --save

2. 在main.js中引入

import ScrollReveal from 'scrollreveal'
import 'animate.css'

3. 在组件中使用

<template>
  <div class="container">
    <div class="box" ref="box">
      <h2 class="title">ScrollReveal + Animate.css</h2>
      <p class="subtitle">Scroll down to see the magic happen!</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    const sr = ScrollReveal()
    sr.reveal('.box', {
      duration: 2000,
      origin: 'top',
      distance: '200px',
      delay: 500,
      easing: 'ease',
      reset: true,
      viewFactor: 0.5,
      afterReveal: (el) => {
        el.classList.add('animated', 'bounceIn')
      }
    })
  }
}
</script>

<style>
.container {
  height: 300vh;
}

.box {
  width: 100%;
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.title {
  font-size: 4rem;
  color: #333;
}

.subtitle {
  font-size: 2rem;
  color: #666;
  margin-top: 2rem;
}
</style>

在mounted钩子函数中，我们使用ScrollReveal来实现动画效果。其中，我们设置了元素从顶部出现，距离为200px，持续时间为2s，延迟0.5s，并且在元素出现后添加了bounceIn的animate.css动画效果。

效果如下：

参考文献：

- https://scrollrevealjs.org/guide/hello-world.html
- https://animate.style/#documentation