Ak-kaleidoscope NPM

ak-kaleidoscope

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:

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

3 years ago

4 years ago