Author: | kawakamiakari |
---|---|
Views Total: | 623 views |
Official Page: | Go to website |
Last Update: | July 6, 2021 |
License: | MIT |
Preview:

Description:
ak-kaleidoscope is a tiny yet customizable particle plugin to create an interactive, animated particle background that responds to mouse move events.
More features:
- 8 shapes: ‘circle’, drop, ‘heart’, ‘oval’, ‘square’, ‘star’, ‘triangle’ or ‘wave’.
- Allows you to specify the min/max size of particles.
- Allows you to specify the number of particles & mirrors.
- Allows you to apply random colors to particles.
- Configurable movement speed.
Basic usage:
1. Load the minified version of the ak-kaleidoscope
plugin from the dist folder.
<script src="dist/kaleidoscope.min.js"></script>
2. Create an HTML canvas on which you want to render the interactive particle background.
<canvas id="kaleidoscope"></canvas>
3. Make the canvas absolutely positioned.
.kaleidoscope { position: absolute; display: block; top: 0; left: 0; }
4. Initialize the plugin to create a default particle background.
const myBg = new Kaleidoscope({ selector: '#kaleidoscope' });
5. Determine the number of particles & mirrors.
new Kaleidoscope({ selector: '#kaleidoscope', edge: 10, quantity: 50 });
6. Override the default shapes used for the particles.
new Kaleidoscope({ selector: '#kaleidoscope', shapes: ['circle', drop, 'heart', 'oval', 'square', 'star', 'triangle', 'wave'] });
7. Set the min/max size of the particles.
new Kaleidoscope({ selector: '#kaleidoscope', minSize: 30, maxSize: 50 });
8. Specify an array of colors for the particles.
new Kaleidoscope({ selector: '#kaleidoscope', color: ['#FFD1B9', '#564138', '#2E86AB', '#F5F749', '#F24236'] });
9. Determine the movement speed from 0 to 1.
new Kaleidoscope({ selector: '#kaleidoscope', speed: .3 });
10. Set the type of compositing operation to apply when drawing new shapes.
new Kaleidoscope({ selector: '#kaleidoscope', globalCompositeOperation: 'overlay' });
11. Pause & resume the animation.
myBg.pauseAnimation(); myBg.resumeAnimation();
12. Destroy the instance.
myBg.destroy();
Changelog:
v1.1.0 (07/06/2021)
- Minor changes.