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 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
javascript工具库代码
Mar 29 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
实例解析Array和String方法
Dec 14 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 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 curl模拟浏览器抓取网站信息
2013/10/28 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php获取图片信息的方法详解
2015/12/10 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
js 对象是否存在判断
2009/07/15 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
简单谈谈Python中的闭包
2016/11/30 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
经典c++面试题二
2015/08/14 面试题
金融专业推荐信
2013/11/14 职场文书
建筑工地标语
2014/06/18 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
Consul在linux环境的集群部署
2022/04/08 Servers