by Marcello Brivio Follow @marcellobrivio
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:
<script>
$(document).ready(function() {
$("#container").randomblink();
});
</script>
Note: remember to change the #container selector with the correct ID of your target <div>.
To speed up the customization, I added the following config params you can easily change to meet your needs:
rows: defines the number of rows of the overlay table (default: 3)cols: defines the number of columns of the overlay table (default: 7)onRatio: how many cells are turned on at each cycle (0: no cells; 1: all of them; default: 0.1)offRatio: how many cells are turned off at each cycle (0: no cells; 1: all of them; default: 0.7)interval: the frequency at which cells are turned on and off (in millisec; default: 300 ms)To fire jquery.randomblinker using custom settings, just follow the below example:
<script>
$(document).ready(function() {
$("#container").randomblink({
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
});
});
</script>
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.