【Vue实用功能】Vue中实现粒子效果 particles.js

Vue中实现粒子效果

为了提高页面展示效果，登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果
下载particles.js

npm install --save particles.js

单页面引用

 import * as particlesJs from "particles.js";// 静态文件资源import particlesCfg from "@/static/Json/particles.json";

页面使用
动态粒子要展示的位置，id放到了使用页面最外层的父元素上

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

 #particles {position: fixed;width: 100%;height: 100%;background: url("背景图片地址") no-repeat 50% 50%;background-size: cover;}

particles.json

控制粒子在页面中所呈现的状态。通过修改里边的字段，来得到自己想要的效果。particles.color.value 的值就是修改粒子的颜色；修改particle.shape就是修改粒子的外观

{"particles": {"number": {"value": 160,//数量"density": {"enable": true, //启用粒子的稀密程度"value_area": 800 //区域散布密度大小}},"color": {"value": "#ffffff" //原子的颜色},"shape": {"type": "circle", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]"stroke": {"width": 0, //原子的宽度"color": "#000000" //原子颜色},"polygon": {"nb_sides": 5 // 原子的多边形边数},"image": {"src": "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "http://mywebsite.com/assets/img/yop.png""width": 100, //图片宽度"height": 100 //图片高度}},"opacity": {"value": 1, //不透明度"random": true, //随机不透明度"anim": {"enable": true, //渐变动画"speed": 1, // 渐变动画速度"opacity_min": 0, //渐变动画不透明度"sync": true }},"size": {"value": 3, //原子大小"random": true, // 原子大小随机"anim": {"enable": false, // 原子渐变"speed": 4, //原子渐变速度"size_min": 0.3, "sync": false}},"line_linked": {"enable": false, //连接线"distance": 150, //连接线距离"color": "#ffffff", //连接线颜色"opacity": 0.4, //连接线不透明度"width": 1 //连接线的宽度},"move": {"enable": true, //原子移动"speed": 1, //原子移动速度"direction": "none", //原子移动方向   "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left""random": true, //移动随机方向"straight": false, //直接移动"out_mode": "out", //是否移动出画布"bounce": false, //是否跳动移动"attract": { "enable": false, // 原子之间吸引"rotateX": 600, //原子之间吸引X水平距离"rotateY": 600  //原子之间吸引Y水平距离}}},"interactivity": {"detect_on": "canvas", //原子之间互动检测 "canvas", "window""events": {"onhover": {"enable": true, //悬停"mode": "bubble" //悬停模式      "grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"]},"onclick": {"enable": false,  //点击效果"mode": "repulse"  //点击效果模式   "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"]},"resize": true // 互动事件调整},"modes": {"grab": {"distance": 100, //原子互动抓取距离"line_linked": { "opacity": 0.8  //原子互动抓取距离连线不透明度}},"bubble": {"distance": 250, //原子抓取泡沫效果之间的距离"size": 4, // 原子抓取泡沫效果之间的大小"duration": 2, //原子抓取泡沫效果之间的持续事件"opacity": 1, //原子抓取泡沫效果透明度"speed": 3 },"repulse": {"distance": 400, //击退效果距离"duration": 0.4 //击退效果持续事件},"push": {"particles_nb": 4 //粒子推出的数量},"remove": {"particles_nb": 2}}},"retina_detect": true
}

【Vue实用功能】Vue中实现粒子效果 particles.js相关推荐

UE4 在FPS中播放粒子效果
使用UE4新建一个自带的第一人称设计游戏模板,使用C++工程并且包含初学者内容包在项目中添加粒子效果,使用的函数 /**UWorld* :指向世界或者关卡的指针UParticleSystem*:指向 ...
粒子动画 particles.js 在vue中的使用
1.安装particlesJS npm install --save particles.js 2.创建particles.json文件,设置particles的配置参数 {"particl ...
Unity中实现粒子效果显示在UI上
一:为什么默认模式下粒子效果不能显示在UI上因为Canvas的默认渲染模式是Screen Space-Overlay,这种模式下的Canvas在屏幕空间中渲染,会显示在场景的最上方,也就是说一切UI ...
html+js+css 调用jquery 工人信息管理功能（增删改查）前端实现，以及调用实现鼠标拖尾粒子效果的js库
html + js + css 调用jquery以及underscore.min.js(配合代码实现鼠标粒子效果)实现全前端信息管理基本功能(增删改查) 先附上我运行的一段视频,手机打开清晰一点或者直 ...
酷炫背景粒子插件particles.js星空背景使用示例源码 - 附演示及下载地址
官方给的例子有点复杂,项目中一般就引一个 JS 文件然后调用好了,简单粗暴,网上很少有想要的效果,而且都没有源码,这里分享一个文章目录一.源码地址二.实现效果 1. 电脑端 2. 手机端三.源 ...
粒子效果 Particles
简介术语粒子系统关系到计算机图形学技术,使用大量非常小的sprite或其他图像对象来模拟特定种类的"模糊"现象,通过常规的渲染技术是很难制造的--一般来说有混乱系统.自然现象.或 ...
三维场景中创建镜面反射效果(three.js实战9)
创建镜面效果 1. demo效果 2. 实现要点 2.1 创建三维模型 2.2 创建镜面 2.3 场景动画更新 3. demo代码 1. demo效果 2. 实现要点 2.1 创建三维模型 demo中 ...
超酷炫粒子背景插件—particles.js
GitHub-教程-下载 1)先到github中下载particles.js-master.zip,下载下来的文件中有一个demo案例. 2)将demo文件中的particles.min.js.sty ...
Unity特效基础：粒子效果面板
如何在Unity中实现粒子效果? 首先,右键点击 Hierarchy栏,选择effects->Particle System,这样你就新建了一个粒子系统,如图所示: 下面来介绍右侧监视器(Ins ...

【Vue实用功能】Vue中实现粒子效果 particles.js

Vue中实现粒子效果

【Vue实用功能】Vue中实现粒子效果 particles.js相关推荐

最新文章

热门文章