jQuery Plugin: rf.Sparks
[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
i tries with jQuery JavaScript Library v1.4.2 and all its ok
I got it and it's not working? Any particular version of jquery? I tried with 1.2.6
The 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.
The 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.
This does not seem to be working in firefox or IE. It was about a week ago. ?????
To 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.
hey.. 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?
Nice one dude, looking good now. Cheers!
It isn't a Safari problem, I'd just managed to mess up the site CSS. It should be working fine now.
Like 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?
That'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
Noticed it too... :(
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
That'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
Noticed it too... :(
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
Using it in my blog header for now... nice effect. Thank you guyhttp://www.xcep.net/blog/
Using it in my blog header for now... nice effect. Thank you guyhttp://www.xcep.net/blog/
I love this
I love this
i really like it, very inspired !
great work, thanks to share !
i really like it, very inspired !
great work, thanks to share !
Very 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!
Very 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!
Interesting plugin.
Very cool
Interesting plugin.
Very cool
[...] This post was Twitted by code8 – Real-url.org [...]
[...] This post was Twitted by heads5150 – Real-url.org [...]
[...] jQuery Plugin – rf.Sparks – Matt Kirman (Suggested by Elijah Manor) [...]
[...] 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. [...]
[...] 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. [...]
[...] jQuery Plugin: rf.Sparks | Demo [...]
[...] Please note: with large numbers of sparks you may notice a significant performance hit.View DemoGo to Plugin HomepagejQuery Dropdown Search PanelFor one of my projects recently I was playing about with search boxes [...]
[...] jQuery Plugin: rf.Sparks | Demo [...]