1. 官网效果

官网：https://www.vantajs.com/

由于博主在参考官网及官方GitHub进行应用时遇到一些问题，因此写了该篇博客，以避免大家因找Bug而浪费时间，方便快速的应用。

2. npm安装

注意版本

npm install vanta@0.5.24

npm install three@0.121.0

Vue的版本如下
“vue”: “^2.6.14”

3. 关键部分

渲染容器

<div ref="vantaRef"></div>

导包

import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'

方法

  mounted() {this.vantaEffect = BIRDS({el: this.$refs.vantaRef,THREE: THREE})},beforeDestroy() {if (this.vantaEffect) {this.vantaEffect.destroy()}},

4. 实例1

完整代码：

<template>
<div><div ref="vantaRef" style="width:100%;height:100vh"></div><div class="my_title">Hello,World</div>
</div></template><script>
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'export default {   name: "hello",data() {return {};},mounted() {this.vantaEffect = BIRDS({el: this.$refs.vantaRef,THREE: THREE})},beforeDestroy() {if (this.vantaEffect) {this.vantaEffect.destroy()}},methods: {},};
</script><style>
.my_title{z-index: 999;position: fixed;top: 40%;left: 10%;color: aquamarine;font-size: 100px;font-weight: bolder;
}
</style>

5. 实例2

完整代码：

<template>
<div><div ref="vantaRef" style="width:100%;height:100vh"></div><div class="my_title">Hello,World</div>
</div></template><script>
import * as THREE from 'three'
import Net from 'vanta/src/vanta.net'
export default {   name: "hello",data() {return {};},mounted() {this.vantaEffect = Net({el: this.$refs.vantaRef,THREE: THREE})},beforeDestroy() {if (this.vantaEffect) {this.vantaEffect.destroy()}},methods: {},};
</script><style>
.my_title{z-index: 999;position: fixed;top: 40%;left: 10%;color: aquamarine;font-size: 100px;font-weight: bolder;
}
</style>

6. 实例3 添加颜色参数等

参加颜色参数

<template>
<div><div ref="vantaRef" style="width:100%;height:100vh"></div><div class="my_title">Hello,World</div>
</div></template><script>
import * as THREE from 'three'
import Net from 'vanta/src/vanta.net'
export default {   name: "hello",data() {return {};},mounted() {this.vantaEffect = Net({el: this.$refs.vantaRef,THREE: THREE})VANTA.NET({el: this.$refs.vantaRef,mouseControls: true,touchControls: true,gyroControls: false,minHeight: 200.00,minWidth: 200.00,scale: 1.00,scaleMobile: 1.00,color: 0xdec790,backgroundColor: 0xc04393,spacing: 12.00
})},beforeDestroy() {if (this.vantaEffect) {this.vantaEffect.destroy()}},methods: {},};
</script><style>
.my_title{z-index: 999;position: fixed;top: 40%;left: 10%;color: aquamarine;font-size: 100px;font-weight: bolder;
}
</style>

如果报错：‘XXXXX‘ is not defined ( no-undef )
可参考：https://blog.csdn.net/weixin_44442366/article/details/126162933

更多的特效背景可参考官网:https://www.vantajs.com
修改import和mounted中的信息即可

如果觉得本文有用，点赞收藏鼓励一下吧

【前端】在Vue2中使用Vanta.js炫酷动态背景(全屏背景)相关推荐

前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
Linux中一些有用而炫酷的代码
Linux中一些有用而炫酷的代码文章目录 Linux中一些有用而炫酷的代码一.cal 1.当月的日历 2.近三个月的日历 3.一年的日历二.yes 三.htop 四.fortune 五.scre ...
JS 炫酷特效敢超 Flash
千一网络收集的几十个超酷 JavaScript 特效,这些特效在网上有些也有发布,不过这个应该是最全的. JS 炫酷特效敢超 Flash-3D 特效演示 JS 炫酷特效敢超 Flash-阵列特效演示 ...
html全屏背景视频特效,HTML5全屏背景视频特效插件Vidage.js源码
下面我们对HTML5全屏背景视频特效插件Vidage.js源码文件阐述相关使用资料和HTML5全屏背景视频特效插件Vidage.js源码文件的更新信息. HTML5全屏背景视频特效插件Vidage.j ...
网站首页炫酷动态背景实现
网站首页炫酷动态背景实现先贴出我苦找良久的网站动态背景图实现过程先来一个html简单的显示界面 <!doctype html> <html><head>< ...
html全屏遮罩层,js遮罩层穿透怎么用JS弄遮罩层？全屏，有透明
也可直接点"搜索资料"搜索整个问题. 遮罩层 js 事件穿透搜索资料本地图片图片链接代码提交回答匿名回答自动保存中 html中的frameset,假如有上中下三个f ...
html 全屏显示某个区域,JS实现指定区域的全屏显示功能示例
本文实例讲述了JS实现指定区域的全屏显示功能.分享给大家供大家参考,具体如下: www.jb51.net js指定区域全屏 #fulldiv { background: #fff; width: 10 ...
wordpress 背景_如何在WordPress中添加全屏背景图片
wordpress 背景 Full screen background image seems to be a new design trend that is becoming fashionabl ...
PR视频背景模板 6个创意炫酷动态短视频背景排版pr模板
PR视频背景模板 6个创意炫酷动态短视频背景排版pr模板这是一个时尚的Premiere Pro模板,包含6个独特的外观和动态动画的Instagram故事.他们是如此容易使用,只需编辑文本,拖放在你的 ...
Hyperspace 炫酷太空隧道穿梭屏保
Hyperspace 是mac上一款炫酷的太空隧道穿梭屏保,可让您在太空的远处巡游,在恒星之间飞行,越过渗出的宇宙飞机并穿越无尽的波光粼粼的隧道.您可以选择调整速度,视图深度,视野,星星的数量和大小以 ...

【前端】在Vue2中使用Vanta.js炫酷动态背景(全屏背景)

文章目录