ak-kaleidoscope
ak-kaleidoscope is a lightweight JavaScript plugin for particle backgrounds.
Demo
See demo page.
The examples code can be found in the docs/ folder.
Installation
There are several ways to install ak-kaleidoscope:
- Download the latest version
- Install with npm:
npm install ak-kaleidoscope --save
Usage
Include the minified JS in your HTML (right befor the closing body tag).
<body>
...
<canvas id="kaleidoscope"></canvas>
<script src="path/to/kaleidoscope.min.js"></script>
</body>
Add a few styles to your css.
html,
body {
margin: 0;
padding: 0;
}
.kaleidoscope {
position: absolute;
display: block;
top: 0;
left: 0;
}
Initialize the plugin on the window.onload event.
window.onload = function() {
new Kaleidoscope({
selector: '#kaleidoscope',
});
};
Options
| Option | Type | Default | Description |
|---|---|---|---|
selector |
string | - | Required: The CSS selector of your canvas element |
edge |
number | 10 |
Optional: Amount of mirrors |
shapes |
string[] | ['square', 'circle', 'wave'] |
Optional: Shapes of the particles. Choose from 'circle', drop, 'heart', 'oval', 'square', 'star', 'triangle' or 'wave' |
minSize |
number | 30 |
Optional: Minimum amount of size of the particles |
maxSize |
number | 50 |
Optional: Maximum amount of size of the particles |
color |
string[] | ['#FFD1B9', '#564138', '#2E86AB', '#F5F749', '#F24236'] |
Optional: Colors of the particles |
globalCompositeOperation |
string | 'overlay' |
Optional: Type of compositing operation to apply when drawing particles. Same as MDN |
quantity |
number | 50 |
Optional: Amount of particles |
speed |
number (0 to 1) | 0.3 |
Optional: Movement speed of the particles |
Methods
| Method | Description |
|---|---|
pauseAnimation |
Pauses/stops the particle animation |
resumeAnimation |
Continues the particle animation |
destroy |
Destroys the plugin |
7.1k Jan 2, 2023
4 May 3, 2022
14 Jan 3, 2023
8 Dec 24, 2022
7 Aug 20, 2022
10 Jan 8, 2023
63 Oct 20, 2022
13 Jun 11, 2021
4 Jun 16, 2022
669 Jul 22, 2022
6.2k Dec 19, 2022
600 Dec 8, 2022
315 Sep 20, 2022
15 Jul 22, 2022
172 Dec 12, 2022
8 Jun 9, 2022
391 Dec 29, 2022
44 Dec 6, 2022