Форум сайта MyRusakov.ru

Здравствуйте! Подскажите, пожалуйста, как сделать непрерывно движущейся фон (фоновая картинка). Попробовал сделать через анимацию, фоновая картинка движется, но перед новым циклом почему-то возникает небольшая пауза - получается фоновая картинка движется рывками. Как убрать рывки? - они возникают из-за того, что на доли секунды движение картинки останавливается, потом опять возобновляется.

Скрипт написал такой

$(function repeat(){
$('#fon2').animate({left: '0'},0);
$('#fon2').animate({left: '-562px'},2000);
$('#fon1').animate({left: '562px'},0);
$('#fon1').animate({left: '0'},2000, repeat);
});

В HTML

<div id="wrapper">
<div id="fon1"></div>
<div id="fon2"></div>
</div>

В CSS

#wrapper {
border: 2px solid #800;
width: 562px;
height: 190px;
position: relative;
overflow: hidden;
}

#fon1, #fon2 {
width: 562px;
height: 190px;
background: url(../images/fon.jpg) no-repeat 0 0;
position: absolute;
top: 0;
left: 0;
}

У вас просто не расписана частота движения и плавный переход. Лучше бы вам использовать для данного действа Mootools

Например так:
Задаём диву айди.
<div id="head"></div>


Делаем фоновую картинку,с повторением фона по горизонтали
#head {width:500px;height:240px;background: url(картинка.png) 0 0 repeat-x;}


Скрипт на Mootools,который будет двигать фоновую картинку внутри контейнера:
window.addEvent('domready',function() {
var duration = 50000;
var length = 2000;
var count = 0;
var tweener = $('head').set('tween',{ duration: duration, transition: 'linear' });
//showtime!
var run = function() {
tweener.tween('background-position','-' + (++count * length) + 'px 0px');
};
run();
run.periodical(duration);
});


Зачем изобретать велосипед?)
Но если хотите,то я разберу ваш код.

Спасибо за совет! Небольшая поправка - в <div id="header"></div> надо написать id="head" т.к. в CSS написано #head

Ваш пример работает, только надо еще подключить библиотеку MooTools

В моем случае не указывается частота, т.к. идет смена двух контейнеров (частота определяется скоростью движения контейнеров, и как я понимают, они должны двигаться с постоянной скоростью, т.к. не указано другого) - один контейнер уезжает в сторону, а за ним следует второй контейнер, а за вторым вновь появляется первый, и так далее.

Если сможете, пожалуйста, подскажите, как можно убрать паузу в моем примере.

У вас не работает,так как мой код использует дополнительную бибилотеку Mootools и,соответственно,её нужно подключить.

Что касается вашего кода,как правило,Джаваскрипты выполняются на стороне клиента,поэтому тут уж у кого какая скорость работы браузера и компьютера.
Поэтому ваш скрипт с последовательным следованием картинок не очень удобен.

Можно добавить частоту движения,как тот duration,только в плане движения двух одинаковых картинок.


Как начнётся рабочий день - распишу подробнее.А сейчас - спать

Спасибо! Подключил библиотеку, все работает! А не возникнет каких-то конфликтов между библиотеками в разных браузерах - jquery, jquery ul, mootools?

нет,обычно)
В редких случаях может быть,но пока не наблюдал за свою практику)
Библиотеки разные,как правило.

Такое можно сделать и на jquery,но в данном случае проще именно Motools

Заметил такую вещь - с Mootools в IE8 фон начинает двигаться не сразу, а где-то через 9-10 секунд после открытия страницы. В других IE не проверял.

ну,понимаете,IE это уж совсем отдельный вопрос.
Он не очень любит скрипты вообще. с 8 версии ещё куда ни шло,но версии старше - жуть.

Хаки используют,обычно,но такие мелочёвки не очень актуальны

Нашел почему в моем примере затормаживает анимация - оказывается в конце движения автоматически происходит уменьшение скорости. Чтобы сделать скорость постоянной, надо написать так. Теперь смена фона происходит без остановок.

$(function repeat(){
$('#fon2').animate({left: '0'},0);
$('#fon2').animate({left: '-562px'},2000,"linear";
$('#fon1').animate({left: '562px'},0);
$('#fon1').animate({left: '0'},2000,"linear", repeat);
});

Вот видите.Разобрались =)