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

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

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


Купить недвижимость в финляндии
Недвижимость в Финляндии. Информация по стоимости услуг.
lappi-group.ru
Медиаселлер отзывы
Отзывы и фото туристов
youtube.com
Аксессуары для яхт и катеров интернет магазин
Магазин судового оборудования. Оборудование для лодок, катеров и яхт
partsforyachts.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930