Хочу поделиться небольшим трюком для создания анимированной полосы загрузки как в флеш проигрывателях или в операционной системе.
Имеем в наличии просто картинку:
Как заставить её двигаться? А очень просто! Нужно двигать бекграунд в интервале попиксельно.
Смотрим демо
Если вы не посмотрели исходный текст страницы приведу тут код:
Функция в интервале, каждый вызов увеличивает на 1 значение на которое нужно сдвинуть пиксель, когда значение достигает ширины фоновой картинки оно сбрасывается в 0 таким образом происходит незаметная глазу замена.
Наверное метод давно используется но я до него дошел сам, надеюсь кому-то пригодиться.
Имеем в наличии просто картинку:
Как заставить её двигаться? А очень просто! Нужно двигать бекграунд в интервале попиксельно.
Смотрим демо
Если вы не посмотрели исходный текст страницы приведу тут код:
var xPos=0;
function move_bg(){
$("#load_td").css( {backgroundPosition: xPos+'px 0px'} );
if(xPos == 60){
xPos=0;
}
xPos++;
}
Функция в интервале, каждый вызов увеличивает на 1 значение на которое нужно сдвинуть пиксель, когда значение достигает ширины фоновой картинки оно сбрасывается в 0 таким образом происходит незаметная глазу замена.
Наверное метод давно используется но я до него дошел сам, надеюсь кому-то пригодиться.