Have ideas to improve npm?Join in the discussion! »

    sparklesjs

    1.1.0 • Public • Published

    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

    Install

    npm i sparklesjs

    DownloadsWeekly Downloads

    3

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • avatar