<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

В рамках курса даётся большое количество практических заданий, благодаря которым Вы не просто посмотрите курс, а действительно выполните ряд важнейших шагов, о которых в нём говорится.

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

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

непрерывно движущийся фон
17.11.2013 00:04:11 непрерывно движущийся фон Сообщение #1
Дмитрий184

Дмитрий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;
}
Профиль
17.11.2013 00:52:05 непрерывно движущийся фон Сообщение #2
alexandrdante

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);
});



Зачем изобретать велосипед?)
Но если хотите,то я разберу ваш код.
Профиль
17.11.2013 01:43:47 непрерывно движущийся фон Сообщение #3
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

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

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

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

Если сможете, пожалуйста, подскажите, как можно убрать паузу в моем примере.
Профиль
17.11.2013 01:55:10 непрерывно движущийся фон Сообщение #4
alexandrdante

alexandrdante

Модератор

Модератор

Дата регистрации:
15.11.2013 15:33:40

Сообщений: 207

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

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

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


Как начнётся рабочий день - распишу подробнее.А сейчас - спать
Профиль
17.11.2013 02:00:36 непрерывно движущийся фон Сообщение #5
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Спасибо! Подключил библиотеку, все работает! А не возникнет каких-то конфликтов между библиотеками в разных браузерах - jquery, jquery ul, mootools?
Профиль
17.11.2013 02:17:30 непрерывно движущийся фон Сообщение #6
alexandrdante

alexandrdante

Модератор

Модератор

Дата регистрации:
15.11.2013 15:33:40

Сообщений: 207

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

Такое можно сделать и на jquery,но в данном случае проще именно Motools
Профиль
17.11.2013 03:20:10 непрерывно движущийся фон Сообщение #7
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Заметил такую вещь - с Mootools в IE8 фон начинает двигаться не сразу, а где-то через 9-10 секунд после открытия страницы. В других IE не проверял.
Профиль
17.11.2013 03:22:47 непрерывно движущийся фон Сообщение #8
alexandrdante

alexandrdante

Модератор

Модератор

Дата регистрации:
15.11.2013 15:33:40

Сообщений: 207

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

Хаки используют,обычно,но такие мелочёвки не очень актуальны
Профиль
17.11.2013 09:44:10 непрерывно движущийся фон Сообщение #9
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

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

$(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);
});
Профиль
17.11.2013 11:56:28 непрерывно движущийся фон Сообщение #10
alexandrdante

alexandrdante

Модератор

Модератор

Дата регистрации:
15.11.2013 15:33:40

Сообщений: 207

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