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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
BootStrap表单控件之文本域textarea
May 23 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
js实现适配移动端的拖动效果
Jan 13 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和ACCESS写聊天室(五)
2006/10/09 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php操作mongoDB实例分析
2014/12/29 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
解决Layui数据表格的宽高问题
2019/09/28 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
python中requests库session对象的妙用详解
2017/10/30 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Python @property原理解析和用法实例
2020/02/11 Python
python数据抓取3种方法总结
2021/02/07 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
EJB timer的种类
2014/10/28 面试题
自动化专业毕业生自荐信
2013/11/01 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
年度考核自我鉴定
2014/02/02 职场文书
银行开业庆典方案
2014/02/06 职场文书
公司外出活动方案
2014/08/14 职场文书
初中差生评语
2014/12/29 职场文书
小学同学聚会感言
2015/07/30 职场文书
中秋节祝酒词
2015/08/12 职场文书