jqFloat.js jQuery Plugin

jqFloat.js – A Floating Effect with jQuery!

Written by Kenny on March 21, 2012 jQuery
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.

jqFloat.js – A Floating Effect with jQuery!

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.

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.


<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 NameDescription
Play (or no method specified)Start floating animation.
StopStart landing animation (stop floating animation).

 

Options

There are few options can be used to configure floating animation.

NameTypeDefaultDescription
widthInt100Maximum horizontal floating area. The value will be divided by 2 and append to object left and right.
heightInt100Maximum vertical floating area. The value will be divided by 2 and append to object top and bottom.
speedInt1000Maximum floating speed (in Millisecond).
minHeightInt0The 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.106 December 2012- Enhancement: Enable for immediately stop the floating effect.
Version 1.020 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.


» This Might Interest You «

User Feedbacks (84) Share Your!

  • Bruno

    Is it possible to do a “nom-aleatory” up and down floating?
    I want to use it with an arrow to call attention to a form.
    Thank you!

    3 months ago! Reply
  • I like it. I new find your blog and i love :) andd this post perfect ! Thanks

    6 months ago! Reply
  • Andrew Sak

    Is it possible to use this script to display floating pictures? I’d like to create a real-time photo collage with floating pictures, and your script works very well with what I’m envisioning.

    6 months ago! Reply
  • thanks for sharing helpful with me.

    7 months ago! Reply
  • Mike

    Hey, I have a problem when resizing a browser. My wrapping object width is set to a 100% with relative position. And my child elements are set to absolute position and random left percentage position. Problem is when i want to resize window – my child elements remember the initial width of parent.

    8 months ago! Reply
  • Excellent lightweight plugin. Does the job!

    Cheers!

    1 year ago! Reply
  • This works great. It would be really useful if you changed this so that you can pass an array of words then it creates a cloud with floating words. Anyway Great job!

    1 year ago! Reply
  • Hello,
    is it possible to change the easing of the animation ?
    The direction change too brutaly for me…

    1 year ago! Reply
  • Very nice and useful. Thanks

    1 year ago! Reply

Leave a Feedback

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>