Create An Interactive Particle Background With JavaScript – ak-kaleidoscope

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.