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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 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及Zend Engine的线程安全模型分析
2011/11/10 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中的作用域规则详解
2015/01/30 Python
python画环形图的方法
2020/03/25 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
技术人员面试提纲
2013/11/28 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
道德之星事迹材料
2014/05/03 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
小学生学习保证书
2015/02/26 职场文书
读书笔记怎么写
2015/07/01 职场文书
大学学生会竞选稿
2015/11/19 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python