sparklesjs v1.1.0
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>