JS库中的Particles.js在vue上的运用案例分析


Posted in Javascript onSeptember 13, 2017

知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的。刚好目前的项目是利用vue框架的,两个凑在一起学了。

讲道理,这个用得好的话,页面是可以很酷的,譬如我现在写的项目

JS库中的Particles.js在vue上的运用案例分析

酷酷的登录页

嘻嘻~

安装particles.js

npm install --save particles.js

配置particles.js

1.data

这个data是用于控制粒子在页面中所呈现的状态。

{
"particles": {
 "number": {
 "value": 60,
 "density": {
  "enable": true,
  "value_area": 800
 }
 },
 "color": {
 "value": "#ffffff"
 },
 "shape": {
 "type": "circle",
 "stroke": {
  "width": 0,
  "color": "#000000"
 },
 "polygon": {
  "nb_sides": 5
 },
 "image": {
  "src": "img/github.svg",
  "width": 100,
  "height": 100
 }
 },
 "opacity": {
 "value": 0.5,
 "random": false,
 "anim": {
  "enable": false,
  "speed": 1,
  "opacity_min": 0.1,
  "sync": false
 }
 },
 "size": {
 "value": 3,
 "random": true,
 "anim": {
  "enable": false,
  "speed": 40,
  "size_min": 0.1,
  "sync": false
 }
 },
 "line_linked": {
 "enable": true,
 "distance": 150,
 "color": "#ffffff",
 "opacity": 0.4,
 "width": 1
 },
 "move": {
 "enable": true,
 "speed": 4,
 "direction": "none",
 "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": "grab"
 },
 "onclick": {
  "enable": true,
  "mode": "push"
 },
 "resize": true
 },
 "modes": {
 "grab": {
  "distance": 140,
  "line_linked": {
  "opacity": 1
  }
 },
 "bubble": {
  "distance": 400,
  "size": 40,
  "duration": 2,
  "opacity": 8,
  "speed": 3
 },
 "repulse": {
  "distance": 200,
  "duration": 0.4
 },
 "push": {
  "particles_nb": 4
 },
 "remove": {
  "particles_nb": 2
 }
 }
},
"retina_detect": true
}

2.template

这个就是动态粒子要展示的位置。

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

3.script

因为涉及到dom树,所以必须在挂载结束后初始化particles.js。第一个参数id就是你在template上取得id名,像我要写的话就是particles。第二个参数是你的data存放的路径,个人建议使用相对路径。

mounted(){
 particlesJS.load('id','path to your particles.data');
}

4.style

#particles{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

讲到这里会发现,还有一个最重要的点没讲出来,恩,就是particles.js 的引入。当你的使用范围比较小时,可以直接在当前vue文件的script中引入,即

//vue文件
import particles from 'particles.js'

又或者你觉得这样不好管理,一定要放在main文件中也可以

//main文件
import particles from 'particles.js'
Vue.use(particles)

最后呈现的效果如下

JS库中的Particles.js在vue上的运用案例分析

总结

以上所述是小编给大家介绍的JS库中的Particles.js在vue上的运用案例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
js字符串操作方法实例分析
May 06 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
详解vue-router 路由元信息
Sep 13 #Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 #Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 #Javascript
Vue-Router进阶之滚动行为详解
Sep 13 #Javascript
Vue 滚动行为的具体使用方法
Sep 13 #Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 #Javascript
VUE实现一个分页组件的示例
Sep 13 #Javascript
You might like
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
基于python指定包的安装路径方法
2018/10/27 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
Django模板Templates使用方法详解
2019/07/19 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
证婚人经典证婚词
2014/01/09 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python