Question

Hia experts!

Last time i was scrolling down the interwebs, i found an appealing site (http://www.neotokio.it/), and i wanted to see how they did it, i came this far with the help of stackoverflow,

effect = $("#certainDIV").fadeTo(0, 0);

$(window).scroll(function(d,h) {
    effect.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

This is pretty much the start of the effect, and i was this far already, but now im curious how they created that follow up thing.. So when one Line of words start (or images) the other one starts. i know its a but fuzzy, but when you take a look you will understand what i mean.

The effect that they create with the words is really appealing, but i have no clue how to make that in jQuery..

Could one of you experts help me out?

Thanks.

Answer 1

I’m assuming you a referring to the way the lines move down and increase in opacity. They do that by animating the margin-top and the opacity together. I pulled this example from their site and modified it just a tiny bit to make sense out of context.

$(".mySelector").css({opacity:0,marginTop:-10})
  .delay(500)
  .animate({marginTop:0,opacity:1}, 600, "linear");

It’s definately a cool effect.