We also made this HTML5 drawing application :)
This jQuery plugin produces bubbles around jQuery selector of your choice. Most likely, it will be links or buttons, and you will most likely use it as an addition to CSS hover effect.
You use it as most plugin, typically on mouseover event:
$( selector ).mouseover(function () {
$(this).jBubbles();
});
For example, hover on links below:
image. Path to bubble image, by default our "jBubble.png". However, it doesn't have to be a bubble, it can be heart, kiss, smiley, birdie, raindrop, snowflake, envelope, question mark, exclamation mark, whatever you like. I hope you don't like things like ... you know.
count. How much of them. The more, the better. Or maybe not.
bubbleRate. At what rate they appear.
bubbleSpeed. Time it takes bubble to reach the top of screen (the bigger, the slower).
minSize and maxSize. Minimal and maximal size of bubbles in pixels.
wind. How much they fly to the right (or to the left, if you set negative value).
airPressure. Normally bubbles will tend to fly up. Play with this value to modify this behaviour.
burstOnHover. If set to true (which is default), a bubble will dissapear when you hover over it.
Here is source code. I didn't minify it, it is small anyway. You can minify it if you want, and you can free to tweek it the way you want. I tried to make code as self-explanatory as possible.
Include it usual way, and call it from document ready, or from any other event you like. For example :
<script type="text/javascript" src="jbubbles.js"></script>
<script type="text/javascript">
$(".test-list li").mouseover(function () {
$(this).jBubbles();
});
</script>