How to provide floating effects using jQuery

You must have seen floating elements on many sites and it can be done with CSS. But today I will show you how can you provide floating effect to elements using jQuery. The advantage of doing this with jQuery is that you can provide animate and also control the speed of the animation of floating element.

jqFloat.js is a jQuery plugin that able to make any HTML objects appear to be "floating" on your web page. It helps create simple floating animation and make your websites come alive with these little "floating" object.


You can have several "floating" objects with different attributes within your web page. Also, you might make these floated objects "landing" through plugin’s method, and vice versa of course.

jqFloat.js uses jQuery .animate() method with infinity loop to animate object’s to different positions, thus it make the object appears to be floating on the web page. It also uses jQuery .data() method to store and keep track of each object’s attributes and status. And it works well in all browsers like IE6 and above, Firefox and Webkit browsers.

To use this plugin, all you need to do is to download and include the reference and call the "jqFloat()" method on the object.
//Code Starts
$(document).ready(function() {
   $('object').jqFloat();
});
//Code Ends

Available Options for customization


This plugin also provides some options for customization of the floating animation.

width
Type: Int, Default: 100
Maximum horizontal floating area. The value will be divided by 2 and append to object left and right.

height
Type: Int, Default: 100
Maximum vertical floating area. The value will be divided by 2 and append to object top and bottom.

speed
Type: Int, Default: 1000
Maximum floating speed.

minHeight
Type: Int, Default: 0
The distance of floating object from bottom/surface.
//Code Starts
$(document).ready(function() {
   $('object').jqFloat({
 width: 300,
 height: 300,
 speed: 100
   });
});
//Code Ends
See result below.



Available Methods


This plugin also provides 2 methods which allows to start and stop the floating animation.

Play (or no method specified): Start floating animation and Stop: Start landing animation (stop floating animation).
//Code Starts
$(document).ready(function() {
   //stop landing animation
   $('object').jFloat('stop');
   //start the floating animation
   $('object').jFloat('play');
});
//Code Ends
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..