[Update] I’ve recently changed my JavaScript framework to MooTools, hence the rf.Sparks demo isn’t working properly. The plugin itself hasn’t actually changed so should still work perfectly fine on your own site.
This month’s jQuery plugin is one that creates an effect that I like to describe as “sparks”. We are currently using it on the Redflex splash page whilst we prepare for a new product launch.
From a code point of view it is a reasonably simple effect to produce, all we are doing is creating a whole bunch of <div/>s with an image inside them, and then move them about a bit.
For the sake of brevity I am not going to show you the whole plugin code. If you want to go into more detail than I’m going to here download the development version at the bottom of the page. Instead I’m going to dive right in and show you how to use it.
Hello, World Sparks
The simplest usage of the plugin is by calling:
where #container is the element that you want to display the sparks in. It renders 10 sparks with the image /img/sparks/spark.png and a speed of 5.
Customising Sparks
The plugin is very versatile, you can create as many instances with as many images and/or speeds as you want. Please note: with large numbers of sparks you may notice a significant performance hit.
Creating your own custom sparks is as simple as:
{
number: 10, // how many sparks to create
speed: 5, // how fast you want this to move
img: '/img/sparks/custom-spark.png' // the spark image
}
]);
If you want to have different images for your sparks (like the Redflex splash page) then you just need to add another array to the plugin options. For example:
// custom spark 1
{
number: 10,
speed: 5,
img: '/img/sparks/custom-spark.png'
},
// custom spark 2
{
number: 5,
speed: 3,
img: '/img/sparks/custom-spark2.png'
}
]);
Simples, eh?
Demo
{
number: 10,
speed: 5,
img: '/downloads/rf_sparks/spark.png'
}
]);
Download
- Minified (1.2KB Gzipped)
- Packed (1.4KB Gzipped)
- Development version (1.5KB Gzipped)
- or fork it on GitHub
Very cool
Abbas added these pithy words on May 20.09 at 9:44 pm[...] This post was Twitted by code8 – Real-url.org [...]
Twitted by code8 added this pingback on May 20.09 at 9:54 pmInteresting plugin.
Zuquirio Ámaur added these pithy words on May 20.09 at 10:07 pm[...] This post was Twitted by heads5150 – Real-url.org [...]
Twitted by heads5150 added this pingback on May 20.09 at 10:43 pmVery cool effect, but it doesn’t really look like “sparks” to me. Looks more like a particle effect to be honest.
Either way it’s cool!
David Ackerman added these pithy words on May 20.09 at 11:33 pm[...] jQuery Plugin – rf.Sparks – Matt Kirman (Suggested by Elijah Manor) [...]
The Technology Post for May 20th - Jason N. Gaylord's Blog added this pingback on May 21.09 at 4:58 am[...] On peut modifier le nombre d’étincelles a notre guise avec différentes images… Comme l’explique son auteur sur le site officiel du plugin. [...]
Plugin jQuery : “Sparks” le plugin qui fait des étincelles ! | Point2Zero added this pingback on May 27.09 at 11:22 pmi really like it, very inspired !
dlv added these pithy words on May 30.09 at 1:19 amgreat work, thanks to share !
[...] Matt Kirman hat ein jQuery-Plugin geschrieben, welches eine Art Funken-Effekt erzeugt. Das Plugin erzeugt eine Reihe von DIVs mit Bildern darin, die anschließend animiert werden und sich dementsprechend bewegen. [...]
Funken-Effekt mit jQuery und rf.Sparks « Antary added this pingback on Jun 14.09 at 11:52 amI love this
Srinivas Tamada added these pithy words on Jun 16.09 at 6:06 amI love this
Srinivas Tamada  added these pithy words on Jun 16.09 at 2:06 pmUsing it in my blog header for now… nice effect. Thank you guy
tXptr added these pithy words on Jun 18.09 at 12:46 pmhttp://www.xcep.net/blog/
Using it in my blog header for now… nice effect. Thank you guy
tXptr added these pithy words on Jun 18.09 at 8:46 pmhttp://www.xcep.net/blog/
Very nice effect!
Does anyone else notice that this causes a CPU spike while on the page with the spark script running? Might there be a way to bring the CPU usage down?
Thanks,
Eric added these pithy words on Jul 10.09 at 10:48 amEric
Noticed it too…
tXptr added these pithy words on Jul 10.09 at 1:29 pmThat's one thing that I want to fix in future versions. Of course, you can always fork it on GitHub (http://github.com/mattkirman/rf.Sparks/tree/master) if you want to have a go yourself. Contributions are always welcome.
Matt
Matt added these pithy words on Jul 10.09 at 1:34 pmVery nice effect!
Does anyone else notice that this causes a CPU spike while on the page with the spark script running? Might there be a way to bring the CPU usage down?
Thanks,
Eric added these pithy words on Jul 10.09 at 6:48 pmEric
Very nice effect!
Does anyone else notice that this causes a CPU spike while on the page with the spark script running? Might there be a way to bring the CPU usage down?
Thanks,
Eric added these pithy words on Jul 10.09 at 6:48 pmEric
Noticed it too…
tXptr added these pithy words on Jul 10.09 at 9:29 pmNoticed it too…
tXptr added these pithy words on Jul 10.09 at 9:29 pmThat's one thing that I want to fix in future versions. Of course, you can always fork it on GitHub (http://github.com/mattkirman/rf.Sparks/tree/master) if you want to have a go yourself. Contributions are always welcome.
Matt
Matt added these pithy words on Jul 10.09 at 9:34 pmThat's one thing that I want to fix in future versions. Of course, you can always fork it on GitHub (http://github.com/mattkirman/rf.Sparks/tree/master) if you want to have a go yourself. Contributions are always welcome.
Matt
Matt added these pithy words on Jul 10.09 at 9:34 pmLike the idea, but I don't think it works with Safari 4.0.3, All I see are some large white boxes moving around. Any ideas?
jordy15674 added these pithy words on Aug 19.09 at 12:27 pmLike the idea, but I don't think it works with Safari 4.0.3, All I see are some large white boxes moving around. Any ideas?
jordy15674 added these pithy words on Aug 19.09 at 12:27 pmIt isn't a Safari problem, I'd just managed to mess up the site CSS. It should be working fine now.
Matt added these pithy words on Aug 19.09 at 9:09 pmIt isn't a Safari problem, I'd just managed to mess up the site CSS. It should be working fine now.
Matt added these pithy words on Aug 19.09 at 9:09 pmNice one dude, looking good now. Cheers!
jordy15674 added these pithy words on Aug 20.09 at 10:24 amNice one dude, looking good now. Cheers!
jordy15674 added these pithy words on Aug 20.09 at 10:24 amhey.. Im just trying to use this plugin and it works just fine on Firefox, Chrome and others.. but in IE doesn't.. is there any fix for these?
Hector Bustillos added these pithy words on Sep 02.09 at 10:18 pmTo be honest I haven't tested it in IE. It is so standards in-compliant that testing in it is just too much hassle for me if I'm writing a quick jQuery plugin.
In the meantime, if you could let me know what version of IE you're using I'll see if I can write a fix.
Matt added these pithy words on Sep 03.09 at 10:25 amTo be honest I haven't tested it in IE. It is so standards in-compliant that testing in it is just too much hassle for me if I'm writing a quick jQuery plugin.
In the meantime, if you could let me know what version of IE you're using I'll see if I can write a fix.
Matt added these pithy words on Sep 03.09 at 10:25 amThis does not seem to be working in firefox or IE. It was about a week ago. ?????
Name added these pithy words on Oct 09.09 at 4:32 pmThe plugin should still work if you use it on your own site as the plugin code hasn't actually changed. The demo isn't working because I've recently changed the JavaScript framework that my site uses to MooTools. I may get around to putting a separate demo page up but, until then, the demo isn't going to work.
Matt added these pithy words on Oct 10.09 at 2:34 amThe plugin should still work if you use it on your own site as the plugin code hasn't actually changed. The demo isn't working because I've recently changed the JavaScript framework that my site uses to MooTools. I may get around to putting a separate demo page up but, until then, the demo isn't going to work.
Matt added these pithy words on Oct 10.09 at 10:34 amI got it and it's not working? Any particular version of jquery? I tried with 1.2.6
Cy added these pithy words on Nov 20.09 at 5:41 ami tries with jQuery JavaScript Library v1.4.2 and all its ok
escrono added these pithy words on May 09.10 at 7:26 am