Trying To Figure Out A Text Scroll Effect

Question

I like an effect that I have seen on a web site and I have been paintstakingly sifting through their javascript and CSS to see how its done. However, the site is Korean and to make it more difficult, I am not too well versed in javascript to begin with.

The site is: http://search.naver.com/search.naver?where=nexearch&query=idolfix&sm=top_hty&fbm=1&ie=utf8

Has anyone ever seen the effect on the top right of the page where the page is updating the 10 links every few seconds - specifically the way the text scrolls in place?

Answer 1

They have a wrapper div that has overflow: hidden.

Then inside that div they have 2 divs with the current and the next value.

<div class="wrap">
    <div class="current">
        foo
    </div>
    <div class="next">
        bar
    </div>
</div>

After the effect you just have to make the .next the .current one, and add a new .next value with AJAX.

At first, the .next div is outside the .wrapper (underneath actually), then they move it up.

The effect could easily be done with jQuery moving the two divs at the same time.

$('.current').animate({
    'top': '-1em'
});
$('.next').animate({
    'top': 0
});

Here's a live example: http://jsfiddle.net/tusbar/GFZTE/