jQuery-canvas-sparkles
A little jQuery plugin for making DOM elements sparkle (uses Canvas)
Demo Site
Install
You may download the files in the /dist/
folder.
Requirements:
- jQuery (1.9+)
Installation:
Include the plugin javascript file after jQuery.
Example
Usage
$(".element").sparkle();
Options
You can pass an options object to make this interesting like so:
$(".element").sparkle({ color: "#FFFFFF", count: 30, overlap: 0, speed: 1, minSize: 4, maxSize: 7, direction: "both" });
color
Accepts a HEX string, or "rainbow"
or an array of HEX strings:
$(".element").sparkle({ color: "#FFFFFF" }); $(".element2").sparkle({ color: ["#FFFFFF","#FF0000","#00FFFF"] }); $(".element3").sparkle({ color: "rainbow" });
count
Accepts a number to determine how many sparkles will be on the element at a time. Larger elements need more sparkles, but after a few hundred things can bog down.
$(".element").sparkle({ count: 50 });
overlap
Accepts a nummber which tells the canvas how far over the edge of it's container it should overlap in pixels.
$(".element").sparkle({ overlap: 20 });
speed
Accepts a floating point number to set the speed multiplier, you may need to experiment with this
$(".element").sparkle({ speed: 1.2 });
size
Accepts a number for both min/max to set the size in pixels of the sparkles. Sizes are randomized between min and max.
$(".element").sparkle({ minSize: 2, maxSize: 6 });
direction
Accepts a string of "up"
, "down"
or "both"
to set which direction the sparkles will travel in.
$(".element").sparkle({ direction: "both" }); $(".element2").sparkle({ direction: "up" }); $(".element3").sparkle({ direction: "down" });
Events
We can trigger the start and stop of the sparkles, as well as reset the positions with events.
start.sparkle
triggering the start event will activate the sparkles
stop.sparkle
triggering the stop event will fade the sparkles out and turn them off
resize.sparkle
triggering the resize event will reset the positions of the sparkles and resize the canvas to match it's container.
// 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); });
notes
- looks sexy
- straight out of 90's DHTML days, but with canvas!!!
- Wont work < IE9
- Requires RAF Polyfill for old-ish browsers
- pointer-events doesnt work in IE9, meaning no singleton DOM support (img,hr,br,input) unless wrapped in a DIV
- can look funny at start if your styles take a while to render (just delay load)