JS库之Particles.js中文开发手册及参数详解


Posted in Javascript onSeptember 13, 2017

因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错,就弄了一个

官方github:https://github.com/VincentGarreau/particles.js/

demo制作器,注意可能需要FQ

https://codepen.io/VincentGarreau/pen/pnlso 这个可以把你制作的demo导出

http://vincentgarreau.com/particles.js/这个可以用来尝试配置不同效果

使用方法

加载particle.js并配置粒子:

index.html

<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就是主要的配置文件

注意一下文件顺序,不然会出现问题

实际demo

<!DOCTYPE html>
<html >
<head>
 <meta charset="UTF-8">
 <title>particles.js</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<div id="particles-js"></div>
</body>
 <script src='particles.min.js'></script> 这个玩意需要放在下面
 <script src="index.js"></script>
</html>

JS库之Particles.js中文开发手册及参数详解

如有需要下载demo请到QQ群,黑色原子效果很科幻,还不错

根据css颜色和json配置文件,就打造属于自己的科幻效果

参数

键值 参数选项/ 说明 实例
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   原子之间吸引X水平距离 3000
particles.move.attract.rotateY number  y垂直距离 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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
angular第三方包开发整理(小结)
Apr 19 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
token 机制和实现方式
Dec 15 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 #Javascript
Vue 滚动行为的具体使用方法
Sep 13 #Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 #Javascript
VUE实现一个分页组件的示例
Sep 13 #Javascript
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 #Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 #Javascript
You might like
PHP 第二节 数据类型之数组
2012/04/28 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
javascript常见操作汇总
2014/09/03 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
Scala解析Json字符串的实例详解
2017/10/11 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python 内置函数汇总详解
2019/09/16 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Spy++的使用方法及下载教程
2021/01/29 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
思想政治自我鉴定
2013/10/06 职场文书
应届生服务员求职信
2013/10/31 职场文书
业务经理的岗位职责
2013/11/16 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
学校就业推荐信范文
2014/05/19 职场文书
企业宣传标语
2014/06/09 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
升职感谢信
2015/01/22 职场文书
发布会邀请函
2015/01/31 职场文书
无故旷工检讨书
2015/08/15 职场文书