What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 128 Stack Exchange communities.

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 stackoverflow.com 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
2  
I have just earned the badge "informed" because of you! –  sdespont Jan 30 '13 at 21:27

2 Answers 2

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 http://cdn.sstatic.net/Js/about.js?v=6742560ee1f1

share|improve this answer
1  
And tidiet here: jsfiddle.net/cgpQF –  Bram Vanroy Jan 30 '13 at 21:04
    
Thanks @BramVanroy - much more readable :) –  Steve Fenton 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 .