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 相关文章推荐
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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
php遍历数组的方法分享
2012/03/22 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
JS跨域代码片段
2012/08/30 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
JQuery判断正整数整理小结
2017/08/21 jQuery
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
用Python解决计数原理问题的方法
2016/08/04 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
python 有效的括号的实现代码示例
2019/11/11 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
我们是伦敦女孩:WalG
2018/01/08 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
师德模范事迹材料
2014/06/03 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android