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绑定事件(bind和live的区别介绍)
Aug 23 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
js简易版购物车功能
Jun 17 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 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
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
解决Python3下map函数的显示问题
2019/12/04 Python
python中如何使用insert函数
2020/01/09 Python
详解python变量与数据类型
2020/08/25 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
实习生个人的自我评价
2013/12/08 职场文书
庆元旦广播稿
2014/02/10 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
岗位说明书范文
2014/05/07 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
个人自荐材料
2014/05/23 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis