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:

$('#container').sparks();

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:

$('#container').sparks([
    {
        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:

$('#container').sparks([
    // 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

Background by pareeerica

$('#sparks-container').sparks([
    {
        number: 10,
        speed:  5,
        img:    '/downloads/rf_sparks/spark.png'
    }
]);

Download

Related Posts

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 pm

Interesting 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 pm

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!

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 pm

i really like it, very inspired !
great work, thanks to share !

dlv added these pithy words on May 30.09 at 1:19 am

[...] 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 am

I love this

Srinivas Tamada  added these pithy words on Jun 16.09 at 6:06 am

I love this

Srinivas Tamada  added these pithy words on Jun 16.09 at 2:06 pm

Using it in my blog header for now… nice effect. Thank you guy
http://www.xcep.net/blog/

tXptr added these pithy words on Jun 18.09 at 12:46 pm

Using it in my blog header for now… nice effect. Thank you guy
http://www.xcep.net/blog/

tXptr added these pithy words on Jun 18.09 at 8:46 pm

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

Eric added these pithy words on Jul 10.09 at 10:48 am

Noticed it too… :(

tXptr added these pithy words on Jul 10.09 at 1:29 pm

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

Matt added these pithy words on Jul 10.09 at 1:34 pm

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

Eric added these pithy words on Jul 10.09 at 6:48 pm

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

Eric added these pithy words on Jul 10.09 at 6:48 pm

Noticed it too… :(

tXptr added these pithy words on Jul 10.09 at 9:29 pm

Noticed it too… :(

tXptr added these pithy words on Jul 10.09 at 9:29 pm

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

Matt added these pithy words on Jul 10.09 at 9:34 pm

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

Matt added these pithy words on Jul 10.09 at 9:34 pm

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?

jordy15674 added these pithy words on Aug 19.09 at 12:27 pm

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?

jordy15674 added these pithy words on Aug 19.09 at 12:27 pm

It 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 pm

It 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 pm

Nice one dude, looking good now. Cheers!

jordy15674 added these pithy words on Aug 20.09 at 10:24 am

Nice one dude, looking good now. Cheers!

jordy15674 added these pithy words on Aug 20.09 at 10:24 am

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?

Hector Bustillos added these pithy words on Sep 02.09 at 10:18 pm

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.

Matt added these pithy words on Sep 03.09 at 10:25 am

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.

Matt added these pithy words on Sep 03.09 at 10:25 am

This 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 pm

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.

Matt added these pithy words on Oct 10.09 at 2:34 am

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.

Matt added these pithy words on Oct 10.09 at 10:34 am

I 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 am

i 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
blog comments powered by Disqus