ak-kaleidoscope is a lightweight JavaScript plugin for particle backgrounds.
See demo page.
The examples code can be found in the docs/ folder.
There are several ways to install ak-kaleidoscope:
- Download the latest version
- Install with npm:
npm install ak-kaleidoscope --save
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',
});
};| 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 |
| Method | Description |
|---|---|
pauseAnimation |
Pauses/stops the particle animation |
resumeAnimation |
Continues the particle animation |
destroy |
Destroys the plugin |