Animate any HTML element so it appears to float in space using anti-gravity jQuery effects

This post will teach you some simple jQuery that you can start using today in order to animate elements on your website. In particular, this article will focus on anti-gravity style effects.

Any keen eyed observer looking at my website might notice that there’s a recurring worm that seems to pop up all over the place. He’s Mr. Worm; and he’s been living on my website now since 2008 – so, regrettably, I cannot evict him.

He likes to dig, visit space (in his rocket – of course!) and venture on space walks in his fancyastronaut spacesuit:

You can find him at the top of my blog or tucked away on my main homepage.

If you want to create a similar animation on your own website, to give something the appearance of floating; then you’ll find this useful hopefully.

Before we start…

In order to begin, you’ll need to be using the jQuery library in your web page. If you’re not sure how this can be done; Google has lots of information on how to do this.

The CSS…

You’ll need to apply the following rule to any DOM element (in your HTML) that you wish to anti-gravitate:

position: relative;

If, of course, your element already has a position property declared – you can skip this part and leave it as it was.

The JavaScript function…

I wrote a little function which I named antiGrav – you’re welcome to use it as is, or amend it to your liking.

This function allows you to pass any DOM element as an argument and it will start a looped animation which will make it appear to float. It automatically calculates its current position, and moves it by a set amount of pixels.

Here’s the JavaScript/jQuery function:

The variable ‘distance’ of 8 is the amount of pixels that it currently moves from its existing position, you can change this to your liking.

There are also two timings present in this snippet 1500 (1.5 secs) and 1300 (1.3 secs) . You can change these too, but note that they are measured in milliseconds. You could opt to speed it up or slow it down – which ever takes your fancy!

Once the animation has complete it will have done a full cycle and returned back to its original location.

Putting it to use…

Now that you appear to be all set-up, you can start applying the function to your DOM elements in order to animate them. For this example, I’ll be using Mr. Worm in his spacesuit. His element is a div, with the class=’spacesuit’, like so:

Provided the antiGrav function exists, or is included, in the same document as the element you are trying to animate, you would simply call the function, passing the element as the only required argument.

antiGrav('.spacesuit');

Multiple Elements Passed in one Function

If you want to animate a couple of elements at the same time, you can include them inside the same argument separated by commas, like this:

antiGrav('.elementOne, .elementTwo, .elementThree');

I wouldn’t advise adding this function to too many elements, as it could clog up the animation queue and slow down the users browser significantly. So use sparingly if possible.

Check the jsFiddle

I uploaded this little jQuery snippet to jsFiddle in case you want to have a play with it yourself.

How does it work?

function antiGrav(ele) { // anti-gravity floating on an element ;)

^ Line One: This line creates a custom function named antiGrav, and specifies that it can accept one argument (in brackets) referred to as ele within the function.

    var distance = 8;

^ Line Two: The above line declares a variable and sets the integer 8 as it’s value to be used later by the function.

    $(ele).animate({

^ Line Three: This line uses jQuery’s selector ($) and the argument (ele) to grab the associated DOM element. It then starts to declare an animation on this element:

            'top': "+="+distance+"px"

^ Line Four: Above, we are stating that the animation will move the currently selected element (ele) based on it’s top CSS property. The += indicates that we would like it to move relative to it’s current position (this is also why we had to declare the CSS rule earlier). Finally, the px specifies that the measurement will be in pixels. This would accept any CSS based unit that the top property would take.

        },1500,"swing",function(){

^ Line Five: The 1500 specifies that the animation we have declared will last for 1.5 seconds. Next, the “swing” means that the animation will gradually speed up at the start and slow down towards the end; almost like a pendulum. This is great for us to utilise in this function as floating in space would not just be a linear up and down movement, that would appear a little too ‘slidey‘. The final part declares a call-back function (see w3c’s documentation on call-back functions). These are used to queue another function once the current function has completed, hence the name ‘call-back’.

            $(ele).animate({

^ Line Six: Within the call-back function, we again need to grab the element we are animating, so we use the same line as before.

                'top': "-="+distance+"px"

^ Line Seven: Although similar to earlier, this line is slightly different because we are telling it to decrease the current value using the -=. This will return it back to it’s original position, because we are using the same distance value as before.

            },1300,"swing",function(){

^ Line Eight: Again, we specify the time. As we’re animating anti-gravity, you would expect the object to be subjected to more force when trying to pull away from earth, or the pull of gravity. Therefore, the downward part of the animation should happen slightly quicker than pulling away, to show the direction of gravity. Again, it finishes with a call-back function.

                antiGrav(ele);
            });
    });
}

^ Line Nine: The line contained within the call-back, passes the same element we are animating already and invokes the antiGrav function once again, so the cycle starts all over.