Using a jQuery plugin called jqFloat.js, you can create floating effects like the one's in this Presentation. It works by utilizing jQuery's animate function to animate elements to different positions indefinitely, giving them the illusion that they're floating. This demo is the same one provided on the plugin's web site, and it highlights some interesting ways in which the plugin can be used.
If you'd like to experiment with some of your own ideas, you can download the plugin from here. Don't forget to start by including it in your digital signage Presentation:
<script src="path/to/jqfloat.js"></script>
From there, add the HTML that you would like to appear floated. If that HTML element had an ID of balloon, for example, you would add the following jQuery code to then "float" it:
$('#balloon').jqFloat();
You can configure the floating object by specifying its maximum horizontal floating area (width), maximum vertical floating area (height), maximum floating speed (speed), or its distance from the bottom (minHeight):
$('#balloon').jqFloat({
width:5,
height:30,
speed:1500,
minHeight:300
});
You can also start or stop the animation (like the balloon in the demo Presentation) by passing play or stop:
$('#balloon').jFloat('play');
$('#balloon').jFloat('stop');
The plugin takes care of the rest! Pretty neat, huh?
