JS库之ParticlesJS使用简介


Posted in Javascript onSeptember 12, 2017

particles.js

A lightweight JavaScript library for creating particles.

一个轻量级的创建粒子背景的 JavaScript 库

我们先来看一下效果图:

标准版:

JS库之ParticlesJS使用简介 

星空版:

JS库之ParticlesJS使用简介 

泡泡版:

JS库之ParticlesJS使用简介 

下雪版:

JS库之ParticlesJS使用简介

利用这个我们可以做些什么呢?

我觉得这个比较适合用在无背景的页面,或者说找不到合适的图片来做背景,那么,我们都可以使用这个。

比如说:

JS库之ParticlesJS使用简介

或者

JS库之ParticlesJS使用简介

嗯,效果都挺不错的。

那么,下面将介绍如何使用 particles.js 。

particlesJS 开源在Github上:https://github.com/VincentGarreau/particles.js

这个项目中有提供demo,可以直接下载这个项目,打开demo里面的index.html文件,即可看到效果。

那么,如果我们要构建自己的项目,该如何引入文件呢?

建议如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>particles.js</title>
 <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
 <meta name="author" content="Vincent Garreau" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <link rel="stylesheet" media="screen" href="css/style.css" rel="external nofollow" >
</head>
<body>
<div id="particles-js"></div>
<!-- scripts -->
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
</body>
</html>

particles.js 是它的库,我们肯定是要引入的,app.js 是参数配置文件,我们也要引入,而 demo 中的 stats.js 就没有必要引入了。

style.css 我们也可以引入,背景颜色是在css中设置的。

基于这个模板,我们可以在上面添加我们想要实现的功能,比如说注册登录功能,需要注意的是:
用 div 来封装我们要实现的功能代码块,并且在 css 中为这个 div 设置绝对定位。

下面介绍参数配置文件 app.js 文件的使用:

particles.number.value : 粒子的数量

particles.number.density : 粒子的稀密程度

particles.number.density.enable : 启用粒子的稀密程度 (true 或 false)

particles.number.density.value_area : 每一个粒子占据的空间(启用粒子密度,才可用)

particles.color.value : 粒子的颜色 (支持16进制”#b61924”,rgb”{r:182, g:25, b:36}”,hsl,以及random)

particles.shape.type: 粒子的形状 (”circle” “edge” “triangle” “polygon” “star” “image”)

particles.opacity.value: 粒子的透明度

particles.size.anim.enable: 是否启用粒子速度(true/false)

particles.size.anim.speed: 粒子动画频率

particles.size.anim.sync: 粒子运行速度与动画是否同步

particles.move.speed: 粒子移动速度

大家可以根据这些配置文件,配置自己喜欢的背景出来,下面提供两份完整配置文件 app.js。

配置文件一(经典背景):

{
 "particles": {
 "number": {
  "value": 80,
  "density": {
  "enable": true,
  "value_area": 800
  }
 },
 "color": {
  "value": "#ffffff"
 },
 "shape": {
  "type": "polygon",
  "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": 6,
  "direction": "none",
  "random": false,
  "straight": false,
  "out_mode": "out",
  "bounce": false,
  "attract": {
  "enable": false,
  "rotateX": 600,
  "rotateY": 1200
  }
 }
 },
 "interactivity": {
 "detect_on": "canvas",
 "events": {
  "onhover": {
  "enable": true,
  "mode": "repulse"
  },
  "onclick": {
  "enable": true,
  "mode": "push"
  },
  "resize": true
 },
 "modes": {
  "grab": {
  "distance": 400,
  "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": false
}

配置文件二(星空背景):

{
 "particles": {
 "number": {
  "value": 160,
  "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": 1,
  "random": true,
  "anim": {
  "enable": true,
  "speed": 1,
  "opacity_min": 0,
  "sync": false
  }
 },
 "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",
  "random": true,
  "straight": false,
  "out_mode": "out",
  "bounce": false,
  "attract": {
  "enable": false,
  "rotateX": 600,
  "rotateY": 600
  }
 }
 },
 "interactivity": {
 "detect_on": "canvas",
 "events": {
  "onhover": {
  "enable": true,
  "mode": "bubble"
  },
  "onclick": {
  "enable": true,
  "mode": "repulse"
  },
  "resize": true
 },
 "modes": {
  "grab": {
  "distance": 400,
  "line_linked": {
   "opacity": 1
  }
  },
  "bubble": {
  "distance": 250,
  "size": 0,
  "duration": 2,
  "opacity": 0,
  "speed": 3
  },
  "repulse": {
  "distance": 400,
  "duration": 0.4
  },
  "push": {
  "particles_nb": 4
  },
  "remove": {
  "particles_nb": 2
  }
 }
 },
 "retina_detect": true
}

总结

以上所述是小编给大家介绍的ParticlesJS使用简介,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
JavaScript验证知识整理
Mar 24 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 #Javascript
提升页面加载速度的插件InstantClick
Sep 12 #Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 #Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 #Javascript
VueJs组件prop验证简单介绍
Sep 12 #Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 #Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 #Javascript
You might like
destoon之一键登录设置
2014/06/21 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
图片之间的切换
2006/06/26 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
面向对象编程的优势是什么
2015/12/17 面试题
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
线程同步的方法
2016/11/23 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
Python实现打乒乓小游戏
2021/09/25 Python
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL
Nginx利用Logrotate实现日志分割
2022/05/20 Servers