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 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 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下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
python如何调用java类
2020/07/05 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
写好自荐信的几个要点
2013/12/26 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
大学生村官考核材料
2014/05/23 职场文书
节电标语大全
2014/06/23 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
理财计划书
2014/08/14 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
Python下opencv库的安装过程及问题汇总
2021/06/11 Python