Matt Kirman

Quick read

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

  • http://www.aliphdigital.com/ Abbas

    Very cool

  • http://www.aliphdigital.com Abbas

    Very cool

  • Pingback: Twitted by code8

  • http://mariuzzo.com/ Zuquirio Ámaur

    Interesting plugin.

  • http://mariuzzo.com Zuquirio Ámaur

    Interesting plugin.

  • Pingback: Twitted by heads5150

  • http://dmackerman.com/ David Ackerman

    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!

  • http://dmackerman.com David Ackerman

    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!

  • Pingback: The Technology Post for May 20th - Jason N. Gaylord's Blog

  • Pingback: Plugin jQuery : “Sparks” le plugin qui fait des étincelles ! | Point2Zero

  • http://www.configuracionvisual.com/ dlv

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

  • http://www.configuracionvisual.com dlv

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

  • Pingback: Funken-Effekt mit jQuery und rf.Sparks « Antary

  • http://twitter.com/9lessons Srinivas Tamada 

    I love this

  • http://twitter.com/9lessons Srinivas Tamada 

    I love this

  • http://www.xcep.net/blog/ tXptr

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

  • http://www.xcep.net/blog/ tXptr

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

  • Eric

    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

  • http://www.xcep.net/blog tXptr

    Noticed it too… :(

  • http://mattkirman.com Matt

    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

  • Eric

    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

    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

  • http://www.xcep.net/blog tXptr

    Noticed it too… :(

  • http://www.xcep.net/blog tXptr

    Noticed it too… :(

  • http://mattkirman.com Matt

    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

  • http://twitter.com/mattkirman Matt

    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

  • jordy15674

    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

    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?

  • http://mattkirman.com Matt

    It isn't a Safari problem, I'd just managed to mess up the site CSS. It should be working fine now.

  • http://twitter.com/mattkirman Matt

    It isn't a Safari problem, I'd just managed to mess up the site CSS. It should be working fine now.

  • jordy15674

    Nice one dude, looking good now. Cheers!

  • jordy15674

    Nice one dude, looking good now. Cheers!

  • http://twitter.com/hecbuma Hector Bustillos

    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?

  • http://twitter.com/mattkirman Matt

    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.

  • http://twitter.com/mattkirman Matt

    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.

  • Name

    This does not seem to be working in firefox or IE. It was about a week ago. ?????

  • http://twitter.com/mattkirman Matt

    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.

  • http://twitter.com/mattkirman Matt

    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.

  • Cy

    I got it and it's not working? Any particular version of jquery? I tried with 1.2.6

  • escrono

    i tries with jQuery JavaScript Library v1.4.2 and all its ok

  • Pingback: 40+ Useful jQuery Plugins for Web Designers and Developers | JavaScript | TutsList

  • Pingback: 4 Superb jQuery Plugins | webexpedition18

  • Pingback: 40+ Useful jQuery Plugins for Web Designers and Developers | TutsList