文档章节

particles.js使用文档

heartless01
 heartless01
发布于 2017/07/24 15:08
字数 838
阅读 95
收藏 0

particles.js

A lightweight JavaScript library for creating particles. 
一个轻量级的创建粒子背景的 javascript 库

开源在Github上:https://github.com/VincentGarreau/particles.js

非常简单的html(particles-js是星空的canvas位置)

效果(home.html      index.html)

demo下载路径(百度云盘)

demo下载路径http://pan.baidu.com/s/1o7Oxjuy密码sgx1

常用api

particles.number.value> 粒子的数量
particles.number.density 粒子的稀密程度
particles.number.density.enable 启用粒子的稀密程度 (true 或 false)
particles.number.density.value_area 每一个粒子占据的空间(启用粒子密度,才可用)
particles.color.value 粒子的颜色 (支持16进制”#b61924”,rgb”{r:182, g:25, b:36}”,hsl,以及random)
particles.shape.type 粒子的形状 (”circle” “edge” “triangle” “polygon” “star” “image”)
particles.opacity.value 粒子的透明度
particles.size.anim.enable 是否启用粒子速度(true/false)
particles.size.anim.speed 粒子动画频率
particles.size.anim.sync 粒子运行速度与动画是否同步
particles.move.speed 粒子移动速度

参数

键值 参数选项/ 说明 实例
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

 

© 著作权归作者所有

heartless01
粉丝 0
博文 56
码字总数 14843
作品 0
浦东
前端工程师
私信 提问
Html5添加轻量级炫酷js粒子动画库插件教程

一、使用方法 该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件。 <script src="js/particles.js"></script> 在页面中使用一个div来作为放置粒子的容器。 <div id="p......

大街小巷
2016/01/11
195
0
轻量级 JavaScript 库--particles.js

Particles.js 一个轻量级的JavaScript库,用来在网页上创建颗粒效果。

叶秀兰
2014/12/09
7.2K
0
请教一个web效果

https://www.chirp.io首页波纹,请问知道用的是什么库吗?分析了一下他的源码,没发现什么。我只知道有个类似的库: https://github.com/VincentGarreau/particles.js...

vane_
2017/07/10
149
0
《阿里云前端技术周刊》第二十一期

作者:@纾沉 校对:@语安 @凌焘 知乎:阿里云中台前端/全栈团队专栏 Github:阿里云前端技术周刊 给我们投稿:传送门 参与交流:传送门 前端速报 从在浏览器地址栏中输入url到页面展现的短短...

09/10
0
0
pengjy/particles.js

particles.js a canvas and svg particles show site: https://pengjiyuan.github.io/particles.js/ 我用了两种方式实现了粒子动态连线效果。 但是我们都知道,操作dom的代价是昂贵的,所以我...

pengjy
2016/09/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue中eventBus的使用

使用场景: 1、兄弟组件的通信,父子组件的通信 2、不同路由的通信 针对兄弟组件的通信,父子组件的通信 新建bus.js文件 import Vue from 'vue' var bus = new Vue() export default bus 在需...

tianyawhl
18分钟前
4
0
C# DBHelper

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Data;using System.Data.SqlClient;using System.Windows.Forms;namesp......

vga
21分钟前
4
0
Spring Boot中@ConditionalOnProperty使用详解

在Spring Boot的自动配置中经常看到@ConditionalOnProperty注解的使用,本篇文章带大家来了解一下该注解的功能。 Spring Boot中的使用 在Spring Boot的源码中,比如涉及到Http编码的自动配置...

程序新视界
22分钟前
7
0
centos7下安装mysql(完整配置)

https://blog.csdn.net/baidu_32872293/article/details/80557668

为何不可1995
24分钟前
5
0
如何从零到一设计一个MQ消息队列

消息队列整体设计思路 主要是设计一个整体的消息被消费的数据流。 这里会涉及到:消息生产Producer、Broker(消息服务端)、消息消费者Consumer。 1.Producer(消息生产者):发送消息到Broker。...

一只会编程的狼
30分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部