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