ak-kaleidoscope
v1.1.0
Published
A lightweight JavaScript plugin for particle backgrounds.
Maintainers
kawakamiakariReadme
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 |