HTML Animation

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

20th April 2018no responsesWeb Design

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.

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.

Tags:


Author: Peter Wootton

Top Ranking SEO Expert & Consultant - Ranked Top On Google For "SEO Manchester". Specialist in Technical SEO.


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

  1. Connor Gibson
    January 14, 2010Reply

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.

  2. Nikolas Brooten
    February 21, 2010Reply

    Quisque tristique tincidunt metus non aliquam. Quisque ac risus sit amet quam sollicitudin vestibulum vitae malesuada libero. Mauris magna elit, suscipit non ornare et, blandit a tellus. Pellentesque dignissim ornare elit, quis mattis eros sodales ac.

    • Pearce Frye
      February 22, 2010Reply

      Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit non.

      • Nikolas Brooten
        April 4, 2010Reply

        Nullam id dolor id nibh ultricies vehicula ut id. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

  3. Lou Bloxham
    May 03, 2010Reply

    Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Would you like to share your thoughts?

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