jQuery Plugin To Create Sparkling Stars Animations - Canvas Sparkles

jQuery Plugin To Create Sparkling Stars Animations - Canvas Sparkles
File Size: 20.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.