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 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
关于php循环跳出的问题
2013/07/01 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Fabric 应用案例
2016/08/28 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
Python如何计算语句执行时间
2019/11/22 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
奇怪的鱼:Weird Fish
2018/03/18 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
师范应届毕业生自荐信
2013/11/18 职场文书
优秀党员主要事迹
2014/01/19 职场文书
总经理岗位职责
2015/02/04 职场文书
写给女朋友的保证书
2015/05/09 职场文书
财务管理制度范本
2015/08/04 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis