A Lightweight JavaScript Plugin for Particle Backgrounds | ak-kaleidoscope

particle-backgrounds-ak-kaleidoscope

Ak-kaleidoscope is a lightweight javascript plugin for particle backgrounds. This plugin is an additional component of customizable particles so far to create an overview of an animated interactive background that responds to mouse transfer events.

kaleidoscope animation css, javascript kaleidoscope, css kaleidoscope, jquery kaleidoscope, what is kaleidoscope in canvas, what is javascript in html

More features:

  • 8 shapes: “circle”, drop, “heart”, “oval”, “box”, “star”, “triangle” or “wave”.
  • Allows you to select the minimum / maximum particle size.
  • Allows you to select the number of particles and mirrors.
  • Allows you to apply random colors to particles.
  • Speed for configurable.

How to make use of it:

1. Load the minified model of the ak-kaleidoscope plugin from the dist folder.

<script src="dist/kaleidoscope.min.js"></script>

2. Create an HTML canvas on which you wish to render the interactive particle background.

<canvas id="kaleidoscope"></canvas>

3. Make the canvas completely 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 variety 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 dimension 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 motion velocity from 0 to 1.

new Kaleidoscope({
    selector: '#kaleidoscope',
    speed: .3
});

10. Set the kind of compositing operation to use when drawing new shapes.

new Kaleidoscope({
    selector: '#kaleidoscope',
    globalCompositeOperation: 'overlay'
});

11. Pause & resume the animation.

myBg.pauseAnimation();
myBg.resumeAnimation();

12. Destroy the occasion.

myBg.destroy();

Options

OptionTypeDefaultDescription
selectorstringRequired: The CSS selector of your canvas element
edgenumber10Optional: Amount of mirrors
shapesstring[]['square', 'circle', 'wave']Optional: Shapes of the particles. Choose from 'circle'drop'heart''oval''square''star''triangle' or 'wave'
minSizenumber30Optional: Minimum amount of size of the particles
maxSizenumber50Optional: Maximum amount of size of the particles
colorstring[]['#FFD1B9', '#564138', '#2E86AB', '#F5F749', '#F24236']Optional: Colors of the particles
globalCompositeOperationstring'overlay'Optional: Type of compositing operation to apply when drawing particles. Same as MDN
quantitynumber50Optional: Amount of particles
speednumber (0 to 1)0.3Optional: Movement speed of the particles

Methods

MethodDescription
pauseAnimationPauses/stops the particle animation
resumeAnimationContinues the particle animation
destroyDestroys the plugin

Create An Interactive Particle Background, ak-kaleidoscope Plugin/Github


See Demo And Download

Official Website(kawakamiakari): Click Here

This superior jQuery/javascript plugin is developed by kawakamiakari. For extra Advanced Usages, please go to the official website.