Wootton SEO
  • Home
  • About
  • Services
    • SEO
    • Web Design
    • Social Media
    • Paid Search
    • Content Writing
    • Online Reputation
  • Case Studies
  • Resources
    • SEO News & Blog
    • Tutorials
    • Code Snippets
  • Contact

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

25 April 2017 | by Peter Wootton | Design, Branding
  • Home
  • Blog
  • Animate any HTML element so it appears to float in space using anti-gravity jQuery effects
Tags: jQuery Advertisement Artistry Blog Conceptual
  • 300

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:

1
2
3
4
5
6
7
8
9
10
11
12
function antiGrav(ele) { // anti-gravity floating on an element 😉
    var distance = 8;
    $(ele).animate({
            ‘top’: “+=”+distance+“px”
        },1500,“swing”,function(){
            $(ele).animate({
                ‘top’: “-=”+distance+“px”
            },1300,“swing”,function(){
                antiGrav(ele);
            });
    });
}

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:

1
2
3
<div class=‘spacesuit’>
   <img src=‘spaceworm-in-his-suit.png’ alt=‘Space Worm in his Suit’/>
</div>

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.

View the jsFiddle

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.

Peter Wootton

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

All posts by Peter Wootton
Related Posts
17 july 2017 | by Peter Wootton 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

03 July 2017 | by Peter Wootton 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

22 June 2017 | by Peter Wootton 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

02 June 2017 | by Peter Wootton 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

10 Comments
  • Herman Miller Reply
    17 july 2017, 6:05 pm

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.

    • Alexander Harvard Reply
      17 july 2017, 6:05 pm

      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.

  • Jennifer Freeman Reply
    17 july 2017, 6:05 pm

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.

Write A Comments
Search
About Me
Google Panda Friendly SEO

Peter Wootton is a highly experienced technical SEO consultant who's working in the SEO industry for over a decade.

He has a great comprehensive understanding of all aspects of SEO including but not limited to: Keyword Research, Technical SEO, Outreach, Link Building, Automation & more.

He's also been featured in Grow Traffics Leading SEOs In The UK (2018).

About Author
Follow Us
Categories
  • Business 2
  • Digital Marketing 4
  • PPC 5
  • SEO 39
  • Uncategorised 16
  • Web Design 12
The future belongs to those who believe in the beauty of their dreams. Explore Portfolio
Popular post
  • 16 Ways You Can Improve Traffic Conversions On Your Site
    16 Ways You Can Improve Traffic Conversions On Your Site 25th February 2021
  • A Guide to Combining Colours & Colour Schemes For Great Web Design
    A Guide to Combining Colours & Colour Schemes For Great Web Design 25th February 2021
  • Responsive Design Is a Way Forward, Not for Everyone Though
    Responsive Design Is a Way Forward, Not for Everyone Though 25th February 2021
  • Learning From Your Users
    Learning From Your Users 18th November 2019
tags cloud
AdWordsAhrefsAppleBingBloggingCanonicalisationConversion Rate OptimisationeCommerceFreelanceGoogleGzipiOSjQueryKeywordsLoading Time OptimisationMajestic SEOMatt CuttsPenguinRedirectsSculptSecuritySEOSitelinksSSLSteve JobsWordPress
Archive
  • February 2021 (3)
  • November 2019 (11)
  • August 2019 (1)
  • November 2018 (2)
  • October 2018 (6)
  • September 2018 (3)
  • May 2018 (2)
  • April 2018 (17)
  • October 2017 (1)
  • June 2017 (2)
  • May 2017 (11)
  • June 2016 (1)
  • October 2015 (4)
  • May 2015 (1)
  • February 2015 (1)
  • January 2015 (5)
  • February 2014 (1)
  • May 2013 (1)
  • February 2013 (1)
  • April 2012 (1)
Newsletter
Manchester Based SEO Consultants
On Social Networks
About Wootton SEO

Peter Wootton is a Manchester based SEO Consultant who has been doing SEO over a decade.

He has extensive knowledge in all aspects of SEO and has built up a wealth of experience in not only SEO but a range of digital marketing services including: Reputation Management, Web Development, Social Media Marketing & Pay Per Click Advertising.

Latest SEO News
  • 16 Ways You Can Improve Traffic Conversions On Your Site
    16 Ways You Can Impr... 25th Feb 2021 | by Peter Wootton
  • A Guide to Combining Colours & Colour Schemes For Great Web Design
    A Guide to Combining... 25th Feb 2021 | by Peter Wootton
  • Responsive Design Is a Way Forward, Not for Everyone Though
    Responsive Design Is... 25th Feb 2021 | by Peter Wootton
Subscribe To Our Newsletter

Do you want to learn fresh, new marketing tactics that actually work?

Just enter your email address below to subscribe to my newsletter.

Follow Our Instagram
    WOOTTON SEO IS RATED 5 OUT OF 5 BASED ON 10 REVIEWS.
    © 2019 WOOTTON SEO | SEO MANCHESTER
    Posting....