Попытка выяснить эффект прокрутки текста

Question

Мне нравится эффект, который я видел на веб-сайте, и я тщательно изучал их javascript и CSS, чтобы увидеть, как это делается. Тем не менее, сайт на корейском языке, и, чтобы сделать его более сложным, я не слишком хорошо разбираюсь в javascript для начала.

Сайт: http://search.naver.com/search.naver?where=nexearch&query=idolfix&sm=top_hty&fbm=1&ie=utf8

Кто-нибудь когда-нибудь видел эффект в правом верхнем углу страницы, где страница обновляет 10 ссылок каждые несколько секунд - в частности, способ прокрутки текста на месте?

Answer 1

У них есть div-обертка, которая имеет overflow: hidden.

Тогда внутри этого div у них есть 2 div с текущим и следующим значением.

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

После эффекта вам просто нужно сделать .next .current и добавить новое значение .next с помощью AJAX.

Сначала .next div находится вне .wrapper (фактически внизу), затем они перемещают его вверх.

Эффект можно легко сделать с помощью jQuery, перемещающего два элемента div одновременно.

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

Вот живой пример: http://jsfiddle.net/tusbar/GFZTE/