Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Здравствуйте! Подскажите, пожалуйста, как сделать непрерывно движущейся фон (фоновая картинка). Попробовал сделать через анимацию, фоновая картинка движется, но перед новым циклом почему-то возникает небольшая пауза - получается фоновая картинка движется рывками. Как убрать рывки? - они возникают из-за того, что на доли секунды движение картинки останавливается, потом опять возобновляется.
Скрипт написал такой
$(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;
}
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
У вас просто не расписана частота движения и плавный переход. Лучше бы вам использовать для данного действа 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);
});
Зачем изобретать велосипед?)
Но если хотите,то я разберу ваш код.
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Спасибо за совет! Небольшая поправка - в <div id="header"></div> надо написать id="head" т.к. в CSS написано #head
Ваш пример работает, только надо еще подключить библиотеку MooTools
В моем случае не указывается частота, т.к. идет смена двух контейнеров (частота определяется скоростью движения контейнеров, и как я понимают, они должны двигаться с постоянной скоростью, т.к. не указано другого) - один контейнер уезжает в сторону, а за ним следует второй контейнер, а за вторым вновь появляется первый, и так далее.
Если сможете, пожалуйста, подскажите, как можно убрать паузу в моем примере.
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
У вас не работает,так как мой код использует дополнительную бибилотеку Mootools и,соответственно,её нужно подключить.
Что касается вашего кода,как правило,Джаваскрипты выполняются на стороне клиента,поэтому тут уж у кого какая скорость работы браузера и компьютера.
Поэтому ваш скрипт с последовательным следованием картинок не очень удобен.
Можно добавить частоту движения,как тот duration,только в плане движения двух одинаковых картинок.
Как начнётся рабочий день - распишу подробнее.А сейчас - спать
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Спасибо! Подключил библиотеку, все работает! А не возникнет каких-то конфликтов между библиотеками в разных браузерах - jquery, jquery ul, mootools?
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
нет,обычно)
В редких случаях может быть,но пока не наблюдал за свою практику)
Библиотеки разные,как правило.
Такое можно сделать и на jquery,но в данном случае проще именно Motools
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Заметил такую вещь - с Mootools в IE8 фон начинает двигаться не сразу, а где-то через 9-10 секунд после открытия страницы. В других IE не проверял.
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
ну,понимаете,IE это уж совсем отдельный вопрос.
Он не очень любит скрипты вообще. с 8 версии ещё куда ни шло,но версии старше - жуть.
Хаки используют,обычно,но такие мелочёвки не очень актуальны
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Нашел почему в моем примере затормаживает анимация - оказывается в конце движения автоматически происходит уменьшение скорости. Чтобы сделать скорость постоянной, надо написать так. Теперь смена фона происходит без остановок.
$(function repeat(){
$('#fon2').animate({left: '0'},0);
$('#fon2').animate({left: '-562px'},2000,"linear"
![](/images/smiles/sm3.png)
;
$('#fon1').animate({left: '562px'},0);
$('#fon1').animate({left: '0'},2000,"linear", repeat);
});
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
Вот видите.Разобрались =)