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 相关文章推荐
理清apply(),call()的区别和关系
Aug 14 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
详解Node 定时器
Feb 26 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
javascript实现计算器功能详解流程
Nov 01 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
ThinkPHP模型详解
2015/07/27 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
javascript解析json实例详解
2014/11/05 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
js 函数性能比较方法
2020/08/24 Javascript
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python爬取微信公众号文章的方法
2019/02/26 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
django框架中间件原理与用法详解
2019/12/10 Python
mac使用python识别图形验证码功能
2020/01/10 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
公司应聘求职信
2014/06/21 职场文书
导师对论文的学术评语
2015/01/04 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript