提示：文章寫(xiě)完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔
前言
vanta.js可以為網(wǎng)站設(shè)置炫酷的動(dòng)態(tài)背景 比如在網(wǎng)站登陸的首頁(yè)
一、Vanta.js是什么？
示例：vanta.js可以為網(wǎng)站設(shè)置炫酷的動(dòng)態(tài)背景 比如在網(wǎng)站登陸的首頁(yè)。
二、使用步驟
首先我的測(cè)試項(xiàng)目是vue2版本，關(guān)于React和Angular框架自行查看npm官網(wǎng)Vanta npm 官網(wǎng)：Vanta - npm
1.引入庫(kù)
-
在項(xiàng)目中安裝 three.js 依賴(lài)
這里指定版本，否則會(huì)報(bào)錯(cuò)，因?yàn)閠hree更新了，但是查看源碼，該組件庫(kù)還是使用的這個(gè)版本
npm i three@0.121.0
-
在項(xiàng)目中安裝 Vanta JS 依賴(lài)
Vanta.js官網(wǎng)： Vanta.js Animated website backgrounds in a few lines of code.
Vanta npm 官網(wǎng)：Vanta - npm
npm i vanta
2.代碼部分，在具體項(xiàng)目中調(diào)用（基礎(chǔ)調(diào)用）
注意：我Vanta.js的版本是0.5.24，發(fā)現(xiàn)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"; // 有問(wèn)題
// 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,
});
// // 這里重新設(shè)置樣式
// 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>
這樣一個(gè)炫酷的動(dòng)態(tài)背景就形成了文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-719453.html
下班~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-719453.html
到了這里，關(guān)于【vue】 網(wǎng)站動(dòng)態(tài)背景 | vanta.js的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
