—»     —»   Автоматически перемещающееся фоновое изображение, реализованное посредством jQuery
  Раздел: Анимация   Комментариев: 1  

Автоматически перемещающееся фоновое изображение, реализованное посредством jQuery



Некоторое время назад мы занимались разработкой шаблонов, в которых использовался параллакс-эффект. Вкратце, параллакс – это эффект, который включает в себя несколько фоновых слоев, которые перемещаются с различной скоростью, что создает трехмерный эффект (вспомните известную игру про синего быстрого ежа Соника). В нашем сегодняшнем демо вы сможете увидеть эффект параллакса только в том случае, если начнете изменять в размерах окно браузера.

Автоматически перемещающееся фоновое изображение, реализованное посредством jQuery

Недавно Пол Хейз (Paul Hayes) использовал этот пример в своем проекте. Он использовал очень крутые атрибуты параметра webkit-transition, что помогло ему заставить эффект работать даже без масштабирования окна или javascript. Пол проделал отличную работу, и его демо-файлы работают превосходно, но, конечно же, так как он использовал собственные расширения CSS, его эффект будет работать только в современных браузерах семейства WebKit (Safari 4 и Google Chrome).

Вероятно, пример Пола будет идеальным в будущем, в данный момент потребуется небольшое внедрение javascript, чтобы заставить этот эффект работать во всех браузерах.

Как это работает

Каждый «слой» представляет собой абсолютно позиционированный div, который покрывает весь экран.

<div id="background"></div>
<div id="midground"></div>
<div id="foreground"></div>

#background {
background: url(../images/background.png) repeat 5% 5%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100;
}

#midground {
background: url(../images/midground.png) repeat 20% 20%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 200;
}

#foreground {
background: url(../images/foreground.png) repeat 90% 110%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 300;
}

Фоновые изображения повторяются, и размеры их выставлены в процентном соотношении. Проценты используются для того, чтобы эффект параллакса работал корректно. Но в этой новой javascript-версии мы впишем новые значения, и анимируем их вместо указанных изначально. Для этого нам потребуется jquery-плагин backgroundPosition, так как всемогущий jQuery не может задавать анимацию параметру backgroundPosition.

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){

$('#midground').css({backgroundPosition: '0px 0px'});
$('#foreground').css({backgroundPosition: '0px 0px'});
$('#background').css({backgroundPosition: '0px 0px'});

$('#midground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 240000, 'linear');

$('#foreground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 120000, 'linear');

$('#background').animate({
backgroundPosition:"(-10000px -2000px)"
}, 480000, 'linear');

});
</script>

Учтите, что перед тем, как мы запустим анимацию, нам нужно сбросить backgroundPosition внутри кода javascript. Странно, но это необходимо для того, чтобы плагин работал правильно.

Увеличиваем длину анимации

Эти огромные числа в функции анимации (например, 120000) отвечают за тысячи секунд. Так что, 120000 = 120 секунд = 2 минуты. Изменяя эти числа, вы сможете увеличить или сократить длину анимации. Хотя, стоит отметить, что она не может быть бесконечной. Возможно, есть способ реализации, но в качестве исключения разве что. Возможно, извлечение анимации из функции, которая может быть вызвана бесконечное количество раз, можно назвать решением.

* Элементы, к которым применен эффект параллакс, сильно зависят от прозрачности. Если вам нужно работать в IE6, то не забудьте ознакомиться с фиксом Unit PNG или с DD_belatedPNG.

Смотреть демо | Скачать архивом
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: parallax, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 9268   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 24 мая 2012 @ 09:07
Написал: Rustery — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Где-то полгода назад писал такое же. Решил бесконечную анимацию просто бесконечным циклом wink . Но это не лучший вариант как мне кажеться.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Ооо завод винтовых свай
Установите самый надежный фундамент, железобетонные сваи. По цене винтовых
svai.expert
Интерьер
Дизайн проект интерьера дома квартиры весь комплекс услуг с визуализациями
studio-viva.design
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Апрель 2018    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30