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 中,万物皆对象,为什么还要通过 ...
随机推荐
- 基于C#实现的自动化测试框架:发布自动触发自动化回归测试
接口自动化测试用例完成以后,以前都是发布以后手动运行测试用例.虽然手动运行下脚本也就是一个F5的事情,但是离自动化测试的标准差得很远.这两天有了个大胆的想法,想要实现以下发布时直接触发自动化回归测试用 ...
- angular4实战开发问题——ngclass不起作用
由于路由机制会导致页面不刷新. 在项目中,很多都是使用click做的路由跳转.ngclass有时候会不起作用, 这个时候我是很盲目的,一开始在考虑是不是书写的问题.ngclass需要有特定的格式?第一 ...
- UDP广播 与 TCP客户端 --服务端
随着倒计时的响声,自觉无心工作,只想为祖国庆生. 最近有遇到过这样一个问题,将摄像头识别的行人,车辆实时显示在客户端中.有提供接口,会以Json的数据的形式将实时将识别的对象进行Post提交.所以我们 ...
- C博客第02次作业---循环结构
1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量 1.2 本章学习体会及代码量 1.2.1 学习体会 1.这两周的学习懂得了循环结构的使用方法,懂得了在什么时候应该使用循环结构来处理问 ...
- Easy methods to select MB Star, Extremely MB Star, MB SD C4, Mercedes BENZ C5 SD
MB Star, Extremely MB SD Connect C4, MB SD C4, Mercedes BENZ C5 SD are usually analysis tools to get ...
- nodejs笔记之事件循环
Event Loop (事件循环或者事件轮询) Event Loop是一个程序结构,用于等待和发送消息和事件. 简单说,就是在程序中设置两个线程:一个负责程序本身的运行,称为"主线程&q ...
- 【源码】HashMap源码及线程非安全分析
最近工作不是太忙,准备再读读一些源码,想来想去,还是先从JDK的源码读起吧,毕竟很久不去读了,很多东西都生疏了.当然,还是先从炙手可热的HashMap,每次读都会有一些收获.当然,JDK8对HashM ...
- 安卓入门——————简单记账本的开发(用sqlite存储数据)(一)
设计思想————首先要确定有几个页面.和每个页面的大致布局 由于是入门,我也是学习了不是很长的时间,所以项目比较low.... 第一个页面,也就是打开APP的首页面: 今天这个博客,先实现添加功能!: ...
- nodejs基础快速上手
node 快速了解 hello node.js console.log("hello Node.js"); let http = require("http") ...
- 一款非常好用的 Windows 服务开发框架,开源项目Topshelf
Topshelf是一个开发windows服务的比较好的框架之一,以下演示如何开发Topshelf服务. 1.首先打开你的vs.新建一个TopshelfStudy控制台程序,如下图所示: 这是我用vs2 ...