jBoingPic

So the other day I StumbledUpon-ed this little experiment by Kelvin Luck. It’s a very small piece of JavaScript that turns a picture into a grid that is repelled by the movements of the mouse.

The script can get quite heavy, basically the less columns and rows you have the smoother it will run, and of course if you enable that effect on more than one picture… So anyway I loved the code and I decided to modify it so it would work as a jQuery plugin.

First make sure you have the jQuery library loaded.
<script type="text/javascript" src="http://www.google.com/jsapi"> </script>
<script type="text/javascript">
google.load('jquery', '1.3.2');
</script>

Then insert the CSS file. It can be modified, I used the width and height dimensions of the picture that I’m using for the demo. Feel free to experiment.
.jBoingPic {
width: 596px;
height: 569px;
margin: 60px auto;
position: relative;
}

.jBoingPic-block {
position: absolute;
width: 18px;
height: 18px;
}
The markup:
<div class="jBoingPic">
<img src="images/pic.png" alt="" />
</div>
That way if JavaScript is disabled, the picture will remain.

And finally call the function:
$(function() {
$('.jBoingPic').jBoingPic();
});
The options are:
$('.jBoingPic').jBiongPic({
'image': $(this).children('img'),
'mouseX': 1000,
'mouseY': 1000,
'force': 1500,
'rows': 10,
'cols': 10
});
The Links:

• Kelvin’s Demo
• My Demo
• JS Uncompressed (2 KB)
• JS Minified (1 KB)
• JS Packed (1.3 KB)
• CSS Uncompressed (182 B)
• CSS Minified (131 B)
• Zipped Demo (9.1 KB)