jQuery Plugin To Create Sparkling Stars Animations - Canvas Sparkles

Canvas Sparkles is a jQuery & Html5 canvas based plugin to create a fancy sparkling stars animations on any DOM elements like images.

How to use it:

1. Include the jQuery javascript library and jQuery canvas sparkles plugin at the bottom of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="dist/jquery-canvas-sparkles.js"></script>

2. Wrap the image or DOM element in a container. The plugin won't work on images or DOM elements which cannot contain other elements, unless we wrap them.

<div class="demo">
<img id="image" src="demo.jpg">
</div>

3. Call the plugin on the container and customize the animation via javascript.

$(document).ready(function() {
$("img").sparkle({

// accepts a HEX string, or "rainbow" or an array of HEX strings:
color: ["#2eafea","#e56604"],

// determine how many sparkles will be on the element at a time
count: 30,

// tell the canvas how far over the edge of it's container it should overlap in pixels.
overlap: 0,

// set the speed multiplier
speed: 1,

// min size
minSize: 4,

// max size
maxSize: 7,

// "up", "down" or "both" to set which direction the sparkles will travel in.
direction: "both"

});
});

4. Events.

// start.sparkle
// stop.sparkle
// resize.sparkle

// first we need an element with sparkles
$("header").sparkle();

// here we can remove the default mouse/keyboard triggers for sparkles,
// perhaps we don't want them to trigger on interaction
$("header")
    .off("mouseover.sparkle")
    .off("mouseout.sparkle")
    .off("focus.sparkle")
    .off("blur.sparkle")

// we can also trigger the start/stop events on the element
// which has the sparkles bound to it!
$("header")
    .trigger("start.sparkle")
    .on("click", function() {
        $(this).trigger("stop.sparkle");
    });

// it's also possible to resize teh canvas and reposition 
// the sparkles whenever the browser is resized...
var timer;
$(window).on("resize", function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        $("header").trigger("resize.sparkle");
    },200);
});

Changelog:

2018-07-20

• v1.1.0

2015-01-23

• adds ability to stop, start, reset sparkles with events

---

This awesome jQuery plugin is developed by simeydotme. For more Advanced Usages, please check the demo page or visit the official website.