提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
vanta.js可以为网站设置炫酷的动态背景 比如在网站登陆的首页
一、Vanta.js是什么?
示例:vanta.js可以为网站设置炫酷的动态背景 比如在网站登陆的首页。
二、使用步骤
首先我的测试项目是vue2版本
,关于React和Angular框架自行查看npm官网Vanta npm 官网:Vanta - npm
1.引入库
-
在项目中安装 three.js 依赖
这里指定版本,否则会报错,因为three更新了,但是查看源码,该组件库还是使用的这个版本
npm i three@0.121.0
-
在项目中安装 Vanta JS 依赖
Vanta.js官网: Vanta.js Animated website backgrounds in a few lines of code.
Vanta npm 官网:Vanta - npm
npm i vanta
2.代码部分,在具体项目中调用(基础调用)
注意:我Vanta.js的版本是0.5.24,发现Clouds2,Trunk,Topology,Dots不能用
代码如下(示例):
<template>
<div ref="vantaRef" class="vantaRef">Foreground content here</div>
</template>
<script>
import * as THREE from "three";
// import BIRDS from "vanta/src/vanta.birds";
// import Fog from "vanta/src/vanta.fog";
// import WAVES from "vanta/src/vanta.waves";
// import Clouds from "vanta/src/vanta.clouds";
import Clouds2 from "vanta/src/vanta.clouds2"; // 有问题
// import Globe from "vanta/src/vanta.globe";
// import Net from "vanta/src/vanta.net";
// import Cells from "vanta/src/vanta.cells";
// import Trunk from "vanta/src/vanta.trunk"; //不可用
// import Topology from "vanta/src/vanta.topology"; //不可用
// import Dots from "vanta/src/vanta.dots"; //不可用
// import Rings from "vanta/src/vanta.rings";
// import Halo from "vanta/src/vanta.halo";
export default {
mounted() {
this.vantaEffect = Clouds2({
el: this.$refs.vantaRef,
THREE: THREE,
});
// // 这里重新设置样式
// this.vantaEffect.setOptions({
// mouseControls: true,
// touchControls: true,
// gyroControls: false,
// minHeight: 200.0,
// minWidth: 200.0,
// skyColor: 0x91cde3,
// cloudColor: 0xc9c9d9,
// cloudShadowColor: 0x174b7d,
// sunColor: 0xe37f05,
// speed: 1.5,
// });
},
beforeDestroy() {
if (this.vantaEffect) {
this.vantaEffect.destroy();
}
},
};
</script>
<style lang="scss" scoped>
.vantaRef {
height: 800px;
}
</style>
这样一个炫酷的动态背景就形成了文章来源:https://www.toymoban.com/news/detail-719453.html
下班~文章来源地址https://www.toymoban.com/news/detail-719453.html
到了这里,关于【vue】 网站动态背景 | vanta.js的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!