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 中,万物皆对象,为什么还要通过 ...
随机推荐
- mariadb安装
1.配置yum源 基本源 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo ...
- Qt QLabel 大小随内容自动变化 && 内容填充整个label空间
图1:label的本身大小 图2:给label设置文字,不做任何别的设置 ui->label->setText(QObject::tr("current font is %1&q ...
- sklearn中报错ValueError: Expected 2D array, got 1D array instead:
from sklearn.linear_model import LinearRegression lr = LinearRegression() print(tr_x.shape,tr_y.shap ...
- 安装jar包到本地仓库和远程仓库
转载: https://blog.csdn.net/zengdongwen/article/details/81241198 如何部署到maven中央仓库呢? https://blog.csdn.ne ...
- stm32 堆溢出
STM32 堆溢出 遇到的问题 最近在给旧项目添加了段代码,程序经常到某个状态就突然崩溃了,也不一定是在运行新代码的时候崩溃.检查了几遍代码,数组越界访问,除数为0,内存泄露等常见的问题都不存在. 原 ...
- Vue系列之 => 使用webpack-dev-server工具实现自动打包编译
安装webpack-dev-server (webpack版本3.6.0,webpack-dev-server版本2.11.3)注意版本兼容问题,不然会有N多错误. npm i webpack-dev ...
- Machine Learning 第三周
ML week3 逻辑回归 Logistic Function h_\theta(x)=g(\theta^Tx) g(t)=\frac{1}{1+e^{-z}} 当t大于0, 即下面公式成立时,y=1 ...
- laravel 自动加载 自定义的文件/辅助函数
需求 在 laravel 中自定义了一些 辅助函数,想要laravel框架自动加载这些函数 实现 将自定义的辅助函数放在helpers.php文件中,如下: 在compsoer.json 的 auto ...
- OpenCV学习笔记(二) - 写入视频、jpg格式
写入视频: import sys, os import cv2 imgDir = '/Users/xxx/salient/' videoName = 'vname' fps = 30 #帧频 outp ...
- JDK源码——单例模式
JDK源码中单例模式的应用 1.Runtime类 Runtime类封装了Java运行时的环境.每一个java程序实际上都是启动了一个JVM进程,那么每个JVM进程都是对应这一个Runtime实例,此实 ...