Apr
26
2012

jqFloat.js Floating elements with jQuery

An article by Vrushank

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. Have fun with Floating

Demo Download

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. See below for more details about this.

How It Works

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. Beside, it uses jQuery .data() method to store and keep track of each object’s attributes and status.

jqFloat.js works well in corss-browsers: IE6 and above, Firefox and Webkit browsers.

How to Use

1. First, of course, you need to include jQuery and jqFloat.js script files inside <head> tag.

It should work well with jQuery 1.7.1 (haven’t tested for lower version).

2. Next, you can make your HTML objects “floating” by calling .jqFloat() function on jQuery object like this:

$(document).ready(function() {
	$('object').jqFloat();
});

Well, try define own floating setting rather than using default value. Refer to configuration section for more detail.

3. Enjoy Floating ~!!!

Configuration:

.jqFloat( [Method] [, Options] )

Method: Used to control floating object.
Options: An array to configure floating animation.

Method:

Currently only two methods available:

Play (or no method specified)
Start floating animation.

Stop
Start landing animation (stop floating animation).

Options

There are few options can be used to configure 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.

Example of Configuration

$(document).ready(function() {
	//if no method and options specified
	//start the floating animation with defaults settings
	$('object').jqFloat();
	//if only options specified
	//start the floating animation with specified settings
	$('object').jqFloat({
		width: 300,
		height: 300,
		speed: 100
	});
	//stop the floating animation or
	//start landing animation
	$('object').jFloat('stop');
	//start the floating animation
	$('object').jFloat('play');
});

License

jqFloat.js is licensed under the GNU General Public License version 2 or later. You can do whatever you like to the source code. =)

Demo Download

Tags: effect, elements, float, floating elements, jqfloat, jquery, jquery effect

About the Author: Vrushank Brahmakshatriya

I am Vrushank Brahmakshatriya a 24 year old Entrepreneur blogger, Founder and Editor of "WebDeveloperGeeks". I spend too much time in front of the computer and find myself telling my wife', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. I love jQuery, PHP, MYSQL, CSS, AJAX - pretty much anything. You can follow me on @twitter and @facebook

2 Comments + Add Comment

Himani April 27, 2012 at 6:02 pm

I found this jqFloat very useful Thanks for sharing it.

Reply
Chang Hartry May 9, 2012 at 6:38 am

really great jquery plugin. floating elements you want!!! Thanks!!

Reply