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 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
js DOM的学习笔记
Dec 22 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
python检查指定文件是否存在的方法
2015/07/06 Python
Python的时间模块datetime详解
2017/04/17 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
python 求定积分和不定积分示例
2019/11/20 Python
python多进程并发demo实例解析
2019/12/13 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
SQL Server笔试题
2012/01/10 面试题
广州某公司软件工程师面试题
2014/12/22 面试题
商务考察邀请函范文
2014/01/21 职场文书
节能环保演讲稿
2014/08/28 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
生日寿星公答谢词
2015/09/29 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python