vanta.js的使用（前端网站动态背景）

​

 vanta.js可以为网站设置炫酷的动态背景 比如在网站登陆的首页

官网 Vanta.js - Animated 3D Backgrounds For Your Website

npm官网 vanta - npm

​

• 只需几行代码，即可将3D动画数字艺术添加到任何网页中。
• 工作原理:Vanta在任何HTML元素中插入一个动画效果作为背景。
• 与普通JS、React、Angular、Vue等一起使用。 接下来讲一下如何在vue中使用vanta.js

1. 在项目中安装 three.js 依赖

npm i three

2.在项目中安装 Vanta JS 依赖

npm i vanta

3.代码部分

<template>
  <div ref='vantaRef'>
    Foreground content here
  </div>
</template>
 
<script>
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'
export default {
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>

这样一个炫酷的动态背景就形成了，唯一美中不足的是页面会有轻微卡顿现象（关于React和Angular框架自行查看npm官网vanta - npm

喜欢就请点个赞吧