vue使用particle.js实现前端可交互的粒子效果（含代码）

于 2024-05-20 14:52:21 发布
阅读量775 收藏 11
点赞数 17
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinkunqingning/article/details/139064734
版权

首先我们需要一个实现效果的json文件。

在scr路径下的assets路劲下新建一个json文件，取名particles.json ：

然后直接把下面这堆东西复制进去即可。

{
  "particles": {
    "number": {
      "value": 800,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#fff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 6
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.05,
        "sync": false
      }
    },
    "size": {
      "value": 4,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 10,
        "size_min": 0.05,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "bottom",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 100,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "Window",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "push"
      },
      "onclick": {
        "enable": true,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 100,
        "size": 4,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 160,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 10
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

然后下载安装一下particles.js：

npm install particles.js

package.json中出现版本号即为安装成功：

 

然后我们在需要这个可交互背景的界面引入：

import particlesJson from '../../assets/particles.json'

路径一定要写对哦，路径错了界面就会出不来。 

 然后在mounted方法中进行调用：

    require('particles.js')
// eslint-disable-next-line no-undef
    particlesJS('particles', particlesJson);

 ps：这三行都需要，少了任何一行都不行哦。

然后在上面的template标签中添加一个id=particles的div即可：

<div id="particles"></div>

然后界面内的东西放在这个div里面就可以了。至此已经全部完成。我们看一下效果

 鼠标点击会有雪花躲避鼠标的样式出现，当然是可以自己diy的，只需要直接修改json文件中的value即可，具体需要按照自己的要求去自定义修改，可参考：

键值参数选项/ 说明实例
particles.number.valuenumber   数量40
particles.number.density.enableboolean   true / false
particles.number.density.value_areanumber   区域散布密度大小800
particles.color.value

HEX (string) 
RGB (object) 
HSL (object) 
array selection (HEX) 
random (string)

原子的颜色

"#b61924" 
{r:182, g:25, b:36} 
{h:356, s:76, l:41} 
["#b61924", "#333333", "999999"] 
"random"
particles.shape.typestring 
array selection 原子的形状		"circle" 
"edge" 
"triangle" 
"polygon" 
"star" 
"image" 
["circle", "triangle", "image"]
particles.shape.stroke.widthnumber      原理的宽度2
particles.shape.stroke.colorHEX (string)  原子颜色"#222222"
particles.shape.polygon.nb_slidesnumber       原子的多边形边数5
particles.shape.image.srcpath link 
svg / png / gif / jpg  原子的图片可以使用自定义图片		"assets/img/yop.svg" 
"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.widthnumber 
(for aspect ratio)    图片宽度		100
particles.shape.image.heightnumber 
(for aspect ratio) 图片高度		100
particles.opacity.valuenumber (0 to 1)   不透明度0.75
particles.opacity.randomboolean     随机不透明度true / false
particles.opacity.anim.enableboolean            渐变动画true / false
particles.opacity.anim.speednumber            渐变动画速度3
particles.opacity.anim.opacity_minnumber (0 to 1)       渐变动画不透明度0.25
particles.opacity.anim.syncbooleantrue / false
particles.size.valuenumber       原子大小20
particles.size.randomboolean       原子大小随机true / false
particles.size.anim.enableboolean      原子渐变true / false
particles.size.anim.speednumber     原子渐变速度3
particles.size.anim.size_minnumber0.25
particles.size.anim.syncbooleantrue / false
particles.line_linked.enableboolean       连接线true / false
particles.line_linked.distancenumber       连接线距离150
particles.line_linked.colorHEX (string)   连接线颜色#ffffff
particles.line_linked.opacitynumber (0 to 1)    连接线不透明度0.5
particles.line_linked.widthnumber     连接线的宽度1.5
particles.move.enableboolean     原子移动true / false
particles.move.speednumber     原子移动速度4
particles.move.directionstring              原子移动方向"none" 
"top" 
"top-right" 
"right" 
"bottom-right" 
"bottom" 
"bottom-left" 
"left" 
"top-left"
particles.move.randomboolean              移动随机方向true / false
particles.move.straightboolean              直接移动true / false
particles.move.out_modestring  
(out of canvas)        是否移动出画布		"out" 
"bounce"
particles.move.bounceboolean 
(between particles)   是否跳动移动		true / false
particles.move.attract.enableboolean           原子之间吸引true / false
particles.move.attract.rotateXnumber   原子之间吸引X水平距离3000
particles.move.attract.rotateYnumber  y垂直距离1500
interactivity.detect_onstring        原子之间互动检测"canvas", "window"
interactivity.events.onhover.enableboolean    悬停true / false
interactivity.events.onhover.mode

string 
array selection

悬停模式 

"grab"     抓取临近的
"bubble"  泡沫球效果
"repulse"  击退效果
["grab", "bubble"]
interactivity.events.onclick.enableboolean  点击效果true / false
interactivity.events.onclick.mode

string 
array selection

点击效果模式

"push" 
"remove" 
"bubble" 
"repulse" 
["push", "repulse"]
interactivity.events.resizeboolean         互动事件调整true / false
interactivity.events.modes.grab.distancenumber        原子互动抓取距离100
interactivity.events.modes.grab.line_linked.opacitynumber (0 to 1)        原子互动抓取距离连线不透明度0.75
interactivity.events.modes.bubble.distancenumber       原子抓取泡沫效果之间的距离100
interactivity.events.modes.bubble.sizenumber       原子抓取泡沫效果之间的大小40
interactivity.events.modes.bubble.durationnumber    原子抓取泡沫效果之间的持续事件
(second)		0.4
interactivity.events.modes.repulse.distancenumber       击退效果距离200
interactivity.events.modes.repulse.durationnumber      击退效果持续事件
(second)		1.2
interactivity.events.modes.push.particles_nbnumber         粒子推出的数量4
interactivity.events.modes.push.particles_nbnumber4
retina_detectbooleantrue / false
JKQingNing
关注
  • 17
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue使用recorder.js实现录音功能
10-15
主要为大家详细介绍了vue使用recorder.js实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
particles.js在vue中的实战用法
weixin_44251396的博客
01-06 2030
先看一下效果吧，以便有充分的兴趣读下去！ 用法： 1. 先下载 npm install --save particles.js 2.引入 如果多个文件要用的话，可以用如下引入，单文件则只需import particles from 'particles.js' import particles from 'particles.js' Vue.use(particles) 3. tem...
粒子动画 particles.js 在vue中的使用
小熙哥的博客
06-18 4039
1.安装particlesJS npm install --save particles.js 2.创建particles.json文件，设置particles的配置参数 { "particles": { "number": { "value": 40, "density": { "enable": true, "value_...
Vue 使用 particles.js 实现粒子界面效果以及报错 particlesJS is not defined 解决
Specif1c的博客
12-29 3649
一、效果展示： 二、官方地址 https://marcbruederlin.github.io/particles.js/ https://www.jb51.net/article/123594.htm （中文开发文档） 三、Vue cli 引入 npm i particles.js 四、代码编写 template <template> <div id="particles"></div> </template> scrip
particles.js在vue上的运用
GoodIdea
08-04 1256
知乎的首页后面的粒子动效总觉得很炫酷，搜了一下，发现是用particles.js编写的。刚好目前的项目是利用vue框架的，两个凑在一起学了。 讲道理，这个用得好的话，页面是可以很酷的，譬如我现在写的项目 酷酷的登录页 嘻嘻~ 安装particles.js npm install --save particles.js 配置particles.js template 这个...
粒子动效果 particles.js在vue上的运用
hongyanwang
03-30 728
粒子动效总觉得很炫酷，搜了一下，发现是用particles.js编写的。这个用得好的话，页面是可以很酷的，譬如我现在写的项目 安装particles.js npm install --save particles.js 配置particles.js template 这个就是动态粒子要展示的位置。 当你的使用范围比较小时，可以直接在当前vue文件的script中引入，即 //vue单文件 import particles from ‘particles.js’ 或者你觉得这样不好管理，一定要放在main
Vue+tracking.js 实现前端人脸检测功能
10-15
主要介绍了Vue+tracking.js 实现前端人脸检测功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
基于three.js实现的3D粒子动效实例代码
10-17
主要给大家介绍了关于如何基于three.js实现的3D粒子动效的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
使用three.js+vue框架实现三维交互仿真.zip
12-10
使用three.js+vue框架实现三维交互仿真.zip使用three.js+vue框架实现三维交互仿真.zip使用three.js+vue框架实现三维交互仿真.zip使用three.js+vue框架实现三维交互仿真.zip使用three.js+vue框架实现三维交互仿真.zip...
《循序渐进Vue.js3前端开发实战》实战范例.zip
最新发布
04-18
在前端开发中，会涉及到一些重要的前端技术栈，如vue.js、react.js、node.js、前端安全、react-native等。同时，也需要借助一些工具，如代码编辑工具（WebStorm、VS Code）、代码版本控制工具（Git、SVN）、代码包...
vue中使用particles.js实现登录页炫酷粒子动效
wgh0315的博客
01-21 3448
1、安装依赖 yarn add particles.js 或 npm install particles.js 2、src/components下新建particles文件夹，文件夹下新建index.vue和particles.json，代码如下 index.vue <template> <div class="particles-js-box"> <div id="particles-js"></div> </di
vue中使用particles.js实现登录页粒子特效
chen的博客
10-10 713
1、安装依赖 yarn add particles.js 或 npm install particles.js 2、src/components下新建particles文件夹，文件夹下新建index.vue和particles.json，代码如下 index.vue <template> <div class="particles-js-box"> <div id="particles-js"></div> </div&
实现粒子动画效果VUE particles.js 安装
qq_25037905的博客
04-29 452
style.css #particles-js{ /*particles插件会自算屏幕大小，margin-bottom调整至图片高度*/ margin-bottom: -20%; width: 100%; height: 100%; /*背景颜色*/ /*background-color: #e76392;*/ /*背景图片*/ background-image: url("../../assets/img...
vue3 使用particles.vue3插件粒子
u014678583的博客
03-30 5909
效果（可以修改多种不同的样式效果） 1、安装 npm install particles.vue3 2、main.js import { createApp } from 'vue' import App from './App.vue' import router from "./router"; import Particles from "particles.vue3"; // 引入 const app = createApp(App); app.use(router).use
vue particles.js 登录背景实现粒子动效
weixin_44794123的博客
03-21 2319
粒子动效
particlesJS使用简介
热门推荐
热爱思考、活力满满、开朗爱笑的年轻人
11-11 4万+
particles.js A lightweight JavaScript library for creating particles. 一个轻量级的创建粒子背景的 JavaScript 库 我们先来看一下效果图： 标准版： 星空版： 泡泡版： 下雪版： 利用这个我们可以做些什么呢？ 我觉得这个比较适合用在无背景的页面，或者说找不到合适的图片来做背景
particlesJS在Vue中怎么使用？怎么引入？
fengzideshijie2的博客
11-18 5670
particlesJS在Vue中怎么使用？怎么引入？ 我们先来看看效果图 一、安装particlesJS       npm install --save particles.js 安装好后，可以在你的json文件中看到 二、配置particles.js 我是把particles.js配置好后，以组件的形式引入的 1、在components文件夹下创建particles文件夹 ...
particles.js在vue中使用，以及一些常见的bug总结
tsang荒男的博客
09-28 2056
particles.js的使用 全局安装particles.js npm install --save particles.js 配置particles.js 引入particles.js文件 当你的使用范围比较小时，可以直接在当前vue文件的script中引入 //vue单文件 import particles from 'particles.js' 范围较大时，可以全局引入，在main.j...
vue中使用动画vue-particles
weixin_30666401的博客
12-09 1521
1.下载依赖 npm install vue-particles --save-dev 2.main.js引入 import Vue from 'vue' import VueParticles from 'vue-particles' Vue.use(VueParticles) 3.直接使用 <vue-particles col...
Vue.js实现云盘前端交互
07-28
使用 Vue.js 实现云盘前端交互可以按照以下步骤进行： 1. 创建 Vue 实例：在 HTML 文件中引入 Vue.js，并创建一个 Vue 实例作为整个应用的入口。 ```html <!DOCTYPE html> <html> <head> <title>Cloud Storage App</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- Your app content goes here --> </div> <script> new Vue({ el: "#app", // Your Vue app options go here }); </script> </body> </html> ``` 2. 定义数据和方法：在 Vue 实例的 `data` 属性中定义云盘相关的数据，如文件列表、文件上传状态等。然后，在 `methods` 中定义处理用户交互的方法，如文件上传、文件下载等。 ```javascript new Vue({ el: "#app", data: { fileList: [], uploading: false, // Other data properties go here }, methods: { uploadFile() { // Handle file upload logic here }, downloadFile(file) { // Handle file download logic here }, // Other methods go here } }); ``` 3. 绑定数据和事件：在 Vue 实例对应的 HTML 模板中，使用指令和事件绑定来将数据和方法与用户界面进行交互。 ```html <div id="app"> <input type="file" @change="uploadFile"> <ul> <li v-for="file in fileList" :key="file.id"> {{ file.name }} <button @click="downloadFile(file)">Download</button> </li> </ul> </div> ``` 4. 发送异步请求：根据上传文件和下载文件的需求，使用 Vue.js 提供的异步请求库（如 Axios、Vue-resource 等）来与后端进行数据交互，实现文件上传和下载功能。 ```javascript methods: { uploadFile(event) { this.uploading = true; var file = event.target.files[0]; var formData = new FormData(); formData.append("file", file); axios.post("/api/upload", formData) .then(response => { // Handle successful upload this.uploading = false; }) .catch(error => { // Handle upload error this.uploading = false; }); }, downloadFile(file) { axios.get(`/api/download/${file.id}`, { responseType: "blob" }) .then(response => { // Handle successful download var url = window.URL.createObjectURL(new Blob([response.data])); var link = document.createElement("a"); link.href = url; link.setAttribute("download", file.name); document.body.appendChild(link); link.click(); document.body.removeChild(link); }) .catch(error => { // Handle download error }); }, // Other methods go here } ``` 这只是一个简单的示例，具体的实现方式会根据您的需求和后端接口的设计而有所不同。您可以根据自己的情况进行适当的调整和扩展。同时，您还可以使用 Vue.js 提供的其他特性，如计算属性、组件化等来优化和拓展您的应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值