A jQuery plugin for useless random animations

by Marcello Brivio

A couple of years ago I created a nice jQuery-powered random animation for a web design project I was working on.

I recently found some time to recover that work and I thought it could be easily customized for other projects, too. So I cleaned up the original code and I trasformed it into an easy-to-use jQuery plugin.

The effect principle is actually very easy to understand and customize: a full width table is created in the target container and its cells are randomically turned on and off at a given interval.


First of all you need to include jQuery. I suggest to use Google's CDN-hosted URL:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Then, download the plugin and include it in your page:

<script src="js/jquery.randomblinker.js"></script>

Include the default stylesheet in the <head> section of your page.

<link rel="stylesheet" href="css/jquery.randomblinker.css" media="screen">

Now you can fire jquery.randomblinker using the default settings by putting the following line before your </body> closing tag:

$(document).ready(function() {

Note: remember to change the #container selector with the correct ID of your target <div>.

Advanced Settings

To speed up the customization, I added the following config params you can easily change to meet your needs:

To fire jquery.randomblinker using custom settings, just follow the below example:

$(document).ready(function() {
		rows: 15,					// Number of rows for the ovarlay table
		cols: 40,					// Number of columns for the ovarlay table
		onRatio: 0.1,				// Ratio of cells turned on (0-1)
		offRatio: 0.7,				// Ratio of cells turned off (0-1)
		interval: 200				// Frequency of the animation in msec

Of course you can also have fun editing the default CSS, for example changing colors and transitions, loading a background image, etc.



You can download the JavaScript plugin and the default CSS from GitHub.

Note: the total size (JS + CSS) is less than 2KB.