Главная » 2012 » Ноябрь » 14 » Автоматически перемещающееся фоновое изображение, реализованное посредством jQuery
03:33 Автоматически перемещающееся фоновое изображение, реализованное посредством jQuery | |
Некоторое время назад мы занимались разработкой шаблонов, в которых использовался параллакс-эффект. Вкратце, параллакс – это эффект, который включает в себя несколько фоновых слоев, которые перемещаются с различной скоростью, что создает трехмерный эффект (вспомните известную игру про синего быстрого ежа Соника). В нашем сегодняшнем демо вы сможете увидеть эффект параллакса только в том случае, если начнете изменять в размерах окно браузера.  Недавно Пол Хейз (Paul Hayes) использовал этот пример в своем проекте. Он использовал очень крутые атрибуты параметра webkit-transition, что помогло ему заставить эффект работать даже без масштабирования окна или javascript. Пол проделал отличную работу, и его демо-файлы работают превосходно, но, конечно же, так как он использовал собственные расширения CSS, его эффект будет работать только в современных браузерах семейства WebKit (Safari 4 и Google Chrome). Вероятно, пример Пола будет идеальным в будущем, в данный момент потребуется небольшое внедрение javascript, чтобы заставить этот эффект работать во всех браузерах. Как это работает Каждый «слой» представляет собой абсолютно позиционированный 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 src="js/jquery.backgroundPosition.js" type="text/javascript"><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');}); Учтите, что перед тем, как мы запустим анимацию, нам нужно сбросить backgroundPosition внутри кода javascript. Странно, но это необходимо для того, чтобы плагин работал правильно. Увеличиваем длину анимации Эти огромные числа в функции анимации (например, 120000) отвечают за тысячи секунд. Так что, 120000 = 120 секунд = 2 минуты. Изменяя эти числа, вы сможете увеличить или сократить длину анимации. Хотя, стоит отметить, что она не может быть бесконечной. Возможно, есть способ реализации, но в качестве исключения разве что. Возможно, извлечение анимации из функции, которая может быть вызвана бесконечное количество раз, можно назвать решением. * Элементы, к которым применен эффект параллакс, сильно зависят от прозрачности. Если вам нужно работать в IE6, то не забудьте ознакомиться с фиксом Unit PNG или с DD_belatedPNG. Смотреть демо | Скачать архивом | |
|
| |
| Всего комментариев: 0 | |
