jqFloat.js – A Floating Effect with jQuery!

by Kenny on
jqFloat.js is a jQuery plugin that able to make any HTML objects appear to be floating on your webpage. It is cross-browser compatibility.

Look Inside

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 ~

jqFloat.js jQuery Plugin

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.

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

 

How to Use

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


<script src="jquery.min.js"></script>
<script src="jqfloat.js"></script>

It should works 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:

Method Name Description
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.

Name Type Value Description
width Int 100 Maximum horizontal floating area. The value will be divided by 2 and append to object left and right.
height Int 100 Maximum vertical floating area. The value will be divided by 2 and append to object top and bottom.
speed Int 1000 Maximum floating speed (in Millisecond).
minHeight Int 0 The distance of floating object from bottom/surface.

 

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 
	$('object').jFloat('stop');

	//start the floating animation
	$('object').jFloat('play');
});

Please note that the 'stop' method will move the floating object back to it original position. If you wish to stop the floating effect immediately, use $('object').stop() instead.

 

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. =)

 

Change Log

Version 1.1 06 December 2012 – Enhancement: Enable for immediately stop the floating effect.
Version 1.0 20 March 2012 – Initial Release, 20 March 2012

 

Question?

Something’s not working? Or any other questions regarding this plugin please let me know using comments form below.

Don't enjoy alone, share with your friends also
Read Next

18 Cool jQuery Plugins that will make you WOW!