4

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?

2
  • 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
6

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

2
2

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'});
    });
});

You must log in to answer this question.

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