particular.js
参数
键值 | 参数选项/ 说明 | 实例 |
---|---|---|
particles.number.value |
number 数量 | 40 |
particles.number.density.enable |
boolean | true / false |
particles.number.density.value_area |
number 区域散布密度大小 | 800 |
particles.color.value |
HEX (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 悬停模式 |
"grab" 抓取临近的"bubble" 泡沫球效果"repulse" 击退效果["grab", "bubble"] |
interactivity.events.onclick.enable |
boolean 点击效果 | true / false |
interactivity.events.onclick.mode |
string 点击效果模式 |
"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 |
particular.js的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- js学习笔记:操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- JS正则表达式常用总结
正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...
- 干货分享:让你分分钟学会 JS 闭包
闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...
- JS核心系列:理解 new 的运行机制
和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...
随机推荐
- 用原生js+canvas实现五子棋
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- vue页面传参
1.传的参数是数组 传递参数的页面 let setStr = encodeURIComponent(JSON.stringify(this.tableData)); this.$router.push ...
- EXCEL对比在职员工与离职员工
EXCEL 在B1中 填写这个 =VLOOKUP(A1,C:C,1,0) 然后往下拉 只要有出现#N/A 说明已经离职了 公司需要
- 解决CentOS(6和7版本),/etc/sysconfig/下没有iptables的问题
一.Centos 6版本解决办法: 1.任意运行一条iptables防火墙规则配置命令: iptables -P OUTPUT ACCEPT 2.对iptables服务进行保存: service ip ...
- openwrt路由器进入安全模式
openwrt路由器型号:WNDR3800 一.实验背景 在pc机上通过xshell软件登录openwrt路由器,pc机通过网线与openwrt路由器的LAN接口相连.openwrt路由器自带两块无线 ...
- 为fastdfs文件服务器新增一个storage
一.前言: 前期,已经搭建好了一套fastdfs文件服务器,一个tracker和一个storage,且部署在同一台服务器上,已经正式投入运行快半年了,1T的空间现在只剩下100G容量了,现在需要扩容, ...
- 2018-2019-2 20165316 『网络对抗技术』Exp3:免杀原理与实践
2018-2019-2 20165316 『网络对抗技术』Exp3:免杀原理与实践 一 免杀原理与实践说明 (一).实验说明 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件, ...
- quartz相关记录
1.http://www.quartz-scheduler.org/api/2.3.1-SNAPSHOT/ api地址 2.https://www.jianshu.com/p/3c3e166a7da1 ...
- 中国省市县数据库sql文件(2017年10月31日之前)
摘自国家统计局 sql文件下载地址:https://files.cnblogs.com/files/zxj95121/%E7%9C%81%E5%B8%82%E5%8E%BFsql.zip 2019.4 ...
- postman工具的使用
https://www.cnblogs.com/rookie-c/p/5753948.html#4100341 https://www.jellythink.com/archives/category ...