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 相关文章推荐
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 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
PHP Token(令牌)设计
2008/03/15 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
浅析Python中的多进程与多线程的使用
2015/04/07 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
《毛主席在花山》教学反思
2014/04/20 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL