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 相关文章推荐
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
有关Promises异步问题详解
Nov 13 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
简述JS控制台的使用
Jul 15 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 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会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
javascript特殊用法示例介绍
2013/11/29 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Python自省及反射原理实例详解
2020/07/06 Python
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
食品采购员岗位职责
2014/04/14 职场文书
任命书怎么写
2014/06/04 职场文书
师德师风的心得体会
2014/09/02 职场文书
护士工作失误检讨书
2014/09/14 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
交通事故案件代理词
2015/05/23 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
python_tkinter弹出对话框创建
2022/03/20 Python
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB