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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
Vue实现背景更换颜色操作
Jul 17 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
多人战的战术与战略
2020/03/04 星际争霸
博士208HAF收音机实习报告
2021/03/02 无线电
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
document.all与WEB标准
2020/05/13 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
优秀班组事迹材料
2014/12/24 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
使用Ajax实现进度条的绘制
2022/04/07 Javascript