Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 158 Stack Exchange communities.

What is meta?
Here's how it works:
  1. Any Stack Exchange user can ask a question
  2. The community provides support, votes on ideas, and reports bugs
  3. Your voice helps shape the way Stack Exchange operates

Sorry if this is not a question I should ask here, but:

the new about pages look really cool with those lazy-loaded animations and all. How are the animations like these done? Are they CSS3 or JS animations?

share|improve this question

migrated from Jan 30 '13 at 22:15

This question came from our site for professional and enthusiast programmers.

Definitely Javascript. :) – Bram Vanroy Jan 30 '13 at 21:02
I have just earned the badge "informed" because of you! – sdespont Jan 30 '13 at 21:27
up vote 6 down vote accepted

The page is directed using JavaScript (and jQuery).

It loads additional content as you scroll down and co-ordinates the animation. They aren't using CSS transitions, although some of the effects can be achieved with CSS too - but when you are loading the content and triggering animations all inside of jQuery, you might as well animate there too to keep it all in once place.

The JavaScript can bee seen in

share|improve this answer
And tidiet here: – Bram Vanroy Jan 30 '13 at 21:04
Thanks @BramVanroy - much more readable :) – Sohnee Jan 30 '13 at 21:05

The animation is trigged by the scrollTop value.

I would program this that way (JQuery of course :o) :

$(document).ready(function() {
    //Default values
    $('#myDiv1, #myDiv2').data('anim',false);

    $('body').scroll(function() {
        //Anim 1 : Check if the element position is reach and if the animation has already be done
        if(($(this).scrollTop() > 500)&&($(this).scrollTop() < 1000))
            if($('#myDiv1').data('anim') === false)
                $('#myDiv1').data('anim',true).animate({left: '-=100'});

        //Anim 2
        if(($(this).scrollTop() > 1000)&&($(this).scrollTop() < 1500))
            if($('#myDiv2').data('anim') === false)
                $('#myDiv2').data('anim',true).animate({left: '-=100'});
share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .