sparkles

A vanilla canvas based lib for DOM sparkles ported from jQuery-canvas-sparkles Based on v1.0.1

Disclaimer

I've removed/added a few methods which I find making more sense to this lib.

Install

You can install via npm or via Bower, sparkles is also provided as AMD if you use requireJS:

npm install sparklesjs
bower install sparklesjs

Usage

Simply pass in a valid DOM node as the first argument. The sparkles effect is triggered by hovering the element. If you provide an element which isn't appendable (Such as an img or input) the canvas will be placed right after the element.

new Sparkles(document.querySelector('.element'), options);

Methods

This is where this lib differs from the original one (Based on v1.0.1)

Start

Starts the sparkles effect manually:

var element = new Sparkles(document.querySelector('.element'));
element.start();

Stop

Stops the sparkles effect manually:

var element = new Sparkles(document.querySelector('.element'));
element.stop();

Update (object)

Accepts an object to update the current instance of Sparkles:

var element = new Sparkles(document.querySelector('.element'), {
  color: '#ffffff'
});

element.update({
  color: 'rainbow'
});

Remove

Removes all event listeners from the current Sparkles instance:

var element = new Sparkles(document.querySelector('.element'));
element.remove();

Options

You can provide an object with the options you would like to define for the Sparkles instance:

new Sparkles(DOMnode, {
  color: '#000000',
  count: 30,
  direction: 'both',
  minSize: 4,
  maxSize: 7,
  overlap: 0,
  speed: 1
})

Color (string|array)

Accepts a HEX string, a 'rainbow' string (which will basically randomize the color), or an array or HEX strings to pick through.

color: '#ffffff'

color: 'rainbow'

color: ['#ffffff', '#000000']

Count (integer)

An integer of sparkles to be rendered on that element. Be careful to not chunk up the canvas with sparkles.

counter = 10

Direction (string)

Accepts a string of 'up', 'down' or 'both' to set which direction the sparkles will travel in.

direction: 'up',

direction: 'down',

direction: 'both'

MinSize/MaxSize (integer)

Accepts an integer for both min/max to set the size in pixels of the sparkles. Sizes are randomized between min and max.

minSize: 1,
maxSize: 10

Overlap (integer)

Defines the overlap limit where sparkles can move away from the canvas

overlap: 10

Speed (integer|float)

Defines the sparkles moving speed multiplier.

speed: 2.3

Browser Support

</tr>
<tr>
  <td align="center">9+</td>
  <td align="center">✓</td>
  <td align="center">✓</td>
  <td align="center">✓</td>
  <td align="center">✓</td>
</tr>

License

MIT License