Skip to content

maxspeicher/jquery-sparkle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 

Repository files navigation

jquery-sparkle

A jQuery plug-in that lets you add a sparkle effect to any element.

$("#main").sparkle({
  fill: "#fff", // fill color of the star that makes up the sparkle effect (default: #fff)
  stroke: "#000", // outline color of the star (default: #000)
  size: 20, // size of the sparkle effect in px (default: 20)
  delay: 0, // delay before first sparkle in ms (default: 0)
  duration: 1500, // duration of a sparkle in ms (default: 1500)
  pause: 1000 // delay between two sparkles in ms (default: 1000)
});

You can also add multiple sparkles (with different properties) to the same element:

$("#main").sparkle({
  size: 30
}).sparkle({
  size: 30
}).sparkle({
  size: 10,
  delay: 1000,
  pause: 750
});

Shorthand notation for the above:

$("#main").sparkle([
  '#fff #000 30',
  '#fff #000 30',
  '#fff #000 10 1000 1500 750'
]);

The sparkle effect can be removed using the following option:

$("#main").sparkle("destroy");

See CodePen for the original implementation of the plug-in: http://codepen.io/maxspeicher/pen/zrVKLE

About

A jQuery plug-in that lets you add a sparkle effect to any element.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published