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 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 Javascript
cypress测试本地web应用
Jun 01 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中global和$GLOBALS[]的分析之一
2012/02/02 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
简化版的vue-router实现思路详解
2018/10/19 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
python实现一次创建多级目录的方法
2015/05/15 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python文件操作基础流程解析
2020/03/19 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
Python数据可视化图实现过程详解
2020/06/12 Python
解决python运行效率不高的问题
2020/07/20 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
桥梁工程专业求职信
2014/04/21 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
个人廉政承诺书
2015/04/28 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
python用tkinter开发的扫雷游戏
2021/06/01 Python
Java基础之this关键字的使用
2021/06/30 Java/Android