Анимированный заголовок в jQuery

Question

Я нашел этот классный скрипт jQuery для анимации заголовка: http://www.devirtuoso.com/2009/07/how-to-build-an-animated-header-in-jquery. Однако я бы хотел немного его изменить, но, к сожалению, мои навыки написания сценариев ограничены.

Я хочу сделать следующее: когда анимация достигла конца изображения, я хочу, чтобы она снова прокрутилась вверх, а не начиналась заново, как в учебнике.Итак, в основном изображение будет непрерывно перемещаться вверх и вниз.

Кто-нибудь знает, как это будет выглядеть, по сценарию?

С уважением

Answer 1

Попробуйте изменить функцию scrollBg () следующим образом:

function scrollBg(){

//Go to next pixel row.
current -= step;

//If at the end of the image, then go to the top.
if (current == restartPosition){
    step = -1;
} else if (current == 0) {
    step = 1;
}

//Set the CSS of the header.
$('#header').css("background-position","0 "+current+"px");
}

Вот очень простой рабочий пример (только для демонстрационных целей - используйте код выше): http://jsfiddle.net/lukemartin/u2XJ8/

Всеон переключает значение шага, когда оно достигает конца цикла.