【vue】 网站动态背景 | vanta.js的使用
创始人
2025-05-29 09:09:39

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、Vanta.js是什么？
  • 二、使用步骤
    • 1.引入库
          • 在项目中安装 three.js 依赖
          • 在项目中安装 Vanta JS 依赖
    • 2.代码部分，在具体项目中调用（基础调用）

前言

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不能用

代码如下（示例）：

这样一个炫酷的动态背景就形成了

下班~

上一篇：金价！突然大跌！

下一篇：零公里二手车：是车企造假利器，还是合理创新？要一棍子打死吗？ 0公里的二手车靠谱吗 0公里准新二手车到底什么套路

相关内容

热门资讯

一通智投APP交易平台不合规，... 　　一通智投APP平台的交易模式为白银期货，与国际及国内的白银期货价格走势完全不一样，手续费高10%...
拇指订购APP非法贵金属交易平... 　　互联网上充斥着白银、铂金、铜等现货贵金属投资公司的宣传，通过不实的贵金属现货APP吸引投资者，但...
中国白银APP平台看似正规其实... 　　中国白银APP平台并不正规，投资者没有相关交易经验却在做白银期货交易，把客户当成收割对象，利用高...
裕信银行推动德国商业银行进行重... 来源：环球市场播报 意大利裕信银行首席执行官Andrea Orcel近期推动达成交易，该行计划制定方...
深化部门协同监管，筑牢涉企服务... 为严格落实市政府涉企检查工作要求，长桥市场监管所联合长桥街道综合行政执法队、长桥新村派出所，开展跨部...