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 相关文章推荐
javascript中的括号()用法小结
Apr 14 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
vue组件实例解析
Jan 10 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
微信小程序实现评论功能
Nov 28 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
python读写ini文件示例(python读写文件)
2014/03/25 Python
python模块之StringIO使用示例
2015/04/08 Python
Python实现栈的方法
2015/05/26 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python flask框架端口失效解决方案
2020/06/04 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
团队精神口号
2014/06/06 职场文书
教师党员整改措施
2014/10/24 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
信息技术课教学反思
2016/02/23 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
MySQL数据库 任意ip连接方法
2022/05/20 MySQL