jQuery Plugin: rf.Sparks
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.
The simplest usage of the plugin is by calling:
#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.
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
// custom spark 2