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 中,万物皆对象,为什么还要通过 ...
随机推荐
- MongoDB系列----查
开启查询: db.getMongo().setSlaveOk() 查版本: db.servion(); db.serverBuildInfo(); db.serverStatus().storageE ...
- Linux下利用文件描述符恢复的成功失败实验
1.测试环境准备[oracle@redhat3 ~]$ uname -aLinux redhat3 2.6.32-573.el6.x86_64 #1 SMP Wed Jul 1 18:23:37 ED ...
- git上clone需要ssh时
在命令行中输入ssh-keygen -t rsa -C "your_email@example.com" 然后使用编辑器打开id_rsa.pub文件,复制里面的ssh
- springMVC--annotation
一 解析类 ComponentScanBeanDefinitionParser component-scan标签解析类 component-scan 兼容 annotation-config ,因此前 ...
- CF822D 贪心+递推
CF822D [题目链接]CF822D [题目类型]贪心+递推 &题意: 给你n个人,你可以把他们分组,但必须保持每组相等,分组之后每2个人会比赛,比如一组有i个人,那么就要比赛 次,f[i] ...
- CASE WHEN 及 SELECT CASE WHEN的用法
CASE WHEN 及 SELECT CASE WHEN的用法 Case具有两种格式.简单Case函数和Case搜索函数. 简单Case函数 CASE sex WHEN '1' THEN '男' WH ...
- redis命令行操作
打开shell,首先开启redis服务,在保证服务开启的情况下,打开客户端. 然后可以根据文档,进行命令行试验.
- MMIO和PIO
1.概念 内存映射I/O(MMIO)[统一编址]和端口映射I/O(PMIO)[独立/单独编址]是两种互为补充的I/O方法,用于设备驱动程序和设备通信,即在CPU和外部设备之间. (1)在MMIO中,内 ...
- Spring boot 配置https 实现java通过https接口访问
近来公司需要搭建一个https的服务器来调试接口(服务器用的spring boot框架),刚开始接触就是一顿百度,最后发现互联网认可的https安全链接的证书需要去CA认证机构申请,由于是调试阶段就采 ...
- vue中路由跳转的底层原理
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来.改变浏览器地址而不向服务器发出请求有两种方式: 1. 在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航 2. 使用H5的wind ...