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

在项目中安装 three.js 依赖
```
npm i three
```
在项目中安装 Vanta JS 依赖
```
npm i vanta
```

代码部分

<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

喜欢就请点个赞吧

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

html列表圆点背景,JS实现多彩圆点气泡动态背景
JS实现多彩圆点气泡动态背景一段简短的JS代码,利用html5的canva动画特性,实现多彩圆点气泡动态背景. 网上流传的那种动态背景使用的是easyBackground这种js库,原理是一样的~ ...
js rsa解密中文乱码_python解析JS爬取漫画网站--动态爬虫
我前两天无聊,鬼灭之刃第一季完结了,我暂时没啥动漫看,就想着看看鬼灭之刃的漫画,找了半天,找一个叫漫画堆的网站鬼灭之刃www.manhuadui.com 网页版的还可以,但是我当时拿手机在看,翻一 ...
网站首页炫酷动态背景实现
网站首页炫酷动态背景实现先贴出我苦找良久的网站动态背景图实现过程先来一个html简单的显示界面 <!doctype html> <html><head>< ...
有趣的HTML实例（八）一个很有趣的动态背景（css+js）
小时候,谁都觉得自己的未来闪闪发光,不是吗?但是一旦长大,没有一件事会遂自己心愿. --<被嫌弃的松子的一生> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显 ...
酷炫一款动态背景（HTML +js canvas）
一款酷炫的前端动态页面废话不多说 ,分享一款酷炫的页面动态背景效果见下图. 查看 demo 背景图效果: 实例效果点击效果: 背景css *{margin: 0;padding: 0;}#ca ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-7.分类的模型关联和通用CRUD接口
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-7.分类的模型关联和通用CRUD接口技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和 ...
前端flv.js设置缓冲时间和大小_不可不知的 WEB 前端网站优化 —— 雅虎 34 条军规...
不可不知的 WEB 前端网站优化 -- 雅虎 34 条军规不得不说现在依然适用于大部分的网站当年雅虎推荐了一套优化网站加载速度的34条法则(包括Yslow规则22条),以下是详细说明. 1. Mi ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
JS实现线条动态背景
[Top] JS实现线条动态背景线条随机运动,鼠标移动过程中,有吸附性,话不多说,直接上代码吧! !function () {let num = 100;//设置所画线的颜色let colorLin ...

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

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

最新文章

热门文章