JS库particles.js创建超炫背景粒子插件(附源码下载)


Posted in Javascript onSeptember 13, 2017

插件描述:particles.js用于创建粒子的轻量级 JavaScript 库。

JS库particles.js创建超炫背景粒子插件(附源码下载)

 查看 效果                   源码下载

使用

加载 particles.js和配置粒子

<div id="particles-js"></div>
<script src="particles.js"></script>

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
 console.log('callback - particles.js config loaded');
});

particles.json

{
 "particles": {
 "number": {
 "value": 80,
 "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": 0.5,
 "random": false,
 "anim": {
 "enable": false,
 "speed": 1,
 "opacity_min": 0.1,
 "sync": false
 }
 },
 "size": {
 "value": 10,
 "random": true,
 "anim": {
 "enable": false,
 "speed": 80,
 "size_min": 0.1,
 "sync": false
 }
 },
 "line_linked": {
 "enable": true,
 "distance": 300,
 "color": "#ffffff",
 "opacity": 0.4,
 "width": 2
 },
 "move": {
 "enable": true,
 "speed": 12,
 "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": false,
 "mode": "repulse"
 },
 "onclick": {
 "enable": true,
 "mode": "push"
 },
 "resize": true
 },
 "modes": {
 "grab": {
 "distance": 800,
 "line_linked": {
 "opacity": 1
 }
 },
 "bubble": {
 "distance": 800,
 "size": 80,
 "duration": 2,
 "opacity": 0.8,
 "speed": 3
 },
 "repulse": {
 "distance": 400,
 "duration": 0.4
 },
 "push": {
 "particles_nb": 4
 },
 "remove": {
 "particles_nb": 2
 }
 }
 },
 "retina_detect": true
}

选项

key option type / notes example
particles.number.value number 40
particles.number.density.enable boolean true / false
particles.number.density.value_area number 800
particles.color.value HEX (string)  RGB (object)  HSL (object)  array selection (HEX)  random (string) "#b61924"  {r:182, g:25, b:36}   {h:356, s:76, l:41}  ["#b61924", "#333333", "999999"]  "random"
particles.shape.type string  array selection "circle"  "edge"  "triangle"  "polygon"  "star"  "image"  ["circle", "triangle", "image"]
particles.shape.stroke.width number 2
particles.shape.stroke.color HEX (string) "#222222"
particles.shape.polygon.nb_slides number 5
particles.shape.image.src path link  svg / png / gif / jpg "assets/img/yop.svg"  "http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width number  (for aspect ratio) 100
particles.shape.image.height number  (for aspect ratio) 100
particles.opacity.value number (0 to 1) 0.75
particles.opacity.random boolean true / false
particles.opacity.anim.enable boolean true / false
particles.opacity.anim.speed number 3
particles.opacity.anim.opacity_min number (0 to 1) 0.25
particles.opacity.anim.sync boolean true / false
particles.size.value number 20
particles.size.random boolean true / false
particles.size.anim.enable boolean true / false
particles.size.anim.speed number 3
particles.size.anim.size_min number 0.25
particles.size.anim.sync boolean true / false
particles.line_linked.enable boolean true / false
particles.line_linked.distance number 150
particles.line_linked.color HEX (string) #ffffff
particles.line_linked.opacity number (0 to 1) 0.5
particles.line_linked.width number 1.5
particles.move.enable boolean true / false
particles.move.speed number 4
particles.move.direction string "none"  "top"  "top-right"  "right"  "bottom-right"  "bottom"  "bottom-left"  "left"  "top-left"
particles.move.random boolean true / false
particles.move.straight boolean true / false
particles.move.out_mode string  (out of canvas) "out"  "bounce"
particles.move.bounce boolean  (between particles) true / false
particles.move.attract.enable boolean true / false
particles.move.attract.rotateX number 3000
particles.move.attract.rotateY number 1500
interactivity.detect_on string "canvas", "window"
interactivity.events.onhover.enable boolean true / false
interactivity.events.onhover.mode string  array selection "grab"  "bubble"  "repulse"  ["grab", "bubble"]
interactivity.events.onclick.enable boolean true / false
interactivity.events.onclick.mode string  array selection "push"  "remove"  "bubble"  "repulse"  ["push", "repulse"]
interactivity.events.resize boolean true / false
interactivity.events.modes.grab.distance number 100
interactivity.events.modes.grab.line_linked.opacity number (0 to 1) 0.75
interactivity.events.modes.bubble.distance number 100
interactivity.events.modes.bubble.size number 40
interactivity.events.modes.bubble.duration number  (second) 0.4
interactivity.events.modes.repulse.distance number 200
interactivity.events.modes.repulse.duration number  (second) 1.2
interactivity.events.modes.push.particles_nb number 4
interactivity.events.modes.push.particles_nb number 4
retina_detect boolean true / false

总结

以上所述是小编给大家介绍的JS库particles.js创建超炫背景粒子插件附源码下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 #Javascript
基于vue的短信验证码倒计时demo
Sep 13 #Javascript
BootStrap数据表格实例代码
Sep 13 #Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 #Javascript
Angular CLI 安装和使用教程
Sep 13 #Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 #Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 #Javascript
You might like
图书管理程序(二)
2006/10/09 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
Django app配置多个数据库代码实例
2019/12/17 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Django的CVB实例详解
2020/02/10 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
小学教研工作制度
2014/01/15 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
慰问信格式规范
2015/03/23 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
pytorch中的numel函数用法说明
2021/05/13 Python
教你怎么用Python生成九宫格照片
2021/05/20 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫