Blog. Just Blog

Эффект параллакса на JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Эффект параллакса на JavaScript
Эффект параллакса на JavaScript

Эффект параллакса хорошо известен в астрономии, стрелковом деле и, как ни странно, в современном веб-дизайне. Для начала давайте разберемся, что же такое параллакс вообще. Вот что нам говорят словари.


Параллакс - изменение видимого положения объекта относительно удаленного фона в зависимости от положения наблюдателя.


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

Итак, мы знаем что нам нужно. Это фоновый рисунок и один или несколько слоев с прозрачным фоном. Так как фоновый рисунок тоже будет перемещаться, он должен быть по размерам немного больше того блока, где будет твориться весь этот параллакс. Рисунки слоев могут быть произвольного размера. Как правило, они значительно меньше размеров фонового рисунка. Начинаем рисовать. Для большего эффекта у нас будет фон и два слоя. Фон, понятно дело, находится на самой дальней точке обзора, один слой виртуально расположится почти на середине линии наблюдения, а второй слой будет ближе к наблюдателю. Такое расположение даст максимальный эффект объема.
  1. <div id="overall">
  2.     <div id="layer2"></div>
  3.     <div id="layer1"></div>
  4. </div>
В HTML-разметке ничего сложного, осталось дополнить ее стилями. Тут тоже ничего сложного, фон располагается по центру контейнера, у которого жестко заданы размеры. Внутри него находятся абсолютно спозиционированые плавающие слои.
  1. #overall {
  2.     width700px;
  3.     height240px;
  4.     positionrelative;
  5.     backgroundurl('background.jpg'no-repeat;
  6.     background-position5050%;
  7. }
  8. #layer1 {
  9.     positionabsolute;
  10.     top50px;
  11.     z-index2;
  12. }
  13. #layer2 {
  14.     positionabsolute;
  15.     top20px;
  16.     z-index1;
  17. }
Теперь нужно сделать анимацию. Но сперва нужно установить обработчик движения мыши, так как от перемещения курсора будет меняться точка обзора и, соответственно, проявляться эффект параллакса.
  1. document.body.onmousemove=function(e) {
  2.     // Получить событие
  3.     var || window.event;
  4.  
  5.     var doc document.documentElement;
  6.     var body document.body;
  7.  
  8.     // Получить текущие координаты мыши
  9.     if ("\v" == "v") {
  10.         var mouse_x e.clientX;
  11.         if (doc.clientLeft) { mouse_x -= doc.clientLeft; }
  12.         if (doc && doc.scrollLeft) { mouse_x += doc.scrollLeft; }
  13.         if (body && body.scrollLeft) { mouse_x += body.scrollLeft; }
  14.         var mouse_y e.clientY;
  15.         if (doc.clientTop) { mouse_y -=doc.clientTop; }
  16.         if (doc && doc.scrollTop) { mouse_y += doc.scrollTop; }
  17.         if (body && body.scrollTop) { mouse_y += body.scrollTop; }
  18.     }
  19.     else {
  20.         var mouse_x=e.pageX;
  21.         var mouse_y=e.pageY;
  22.     }
  23.     // Параллакс
  24.     do_parallax(mouse_xmouse_y);
  25. }
Теперь настала очередь эффекта параллакса. Как вы поняли из схемы, отображающей эффект, фон должен двигаться в противоположную сторону от точки наблюдения, а слои в ту же сторону. Размер сдвига обратно пропорционален расстоянию слоя от точки наблюдения, чем слой дальше - тем меньше он сдвигается.
  1. function do_parallax(mouse_xmouse_y) {
  2.     var body document.body;
  3.     var shift1shift2elem;
  4.  
  5.     // Пропорциональные коэффициенты сдвига для слоев
  6.     var sh_1=20;
  7.     var sh_2=100;
  8.  
  9.     // Вертикальный и горизонтальный сдвиг для фонового изображения
  10.     shift1=50-Math.round((50-(mouse_x*100/body.clientWidth))/5);
  11.     shift2=50-Math.round((50-(mouse_y*100/body.clientHeight))/3);
  12.  
  13.     elem=document.getElementById('overall');
  14.     elem.style.backgroundPosition=shift1+'% '+shift2+'%';
  15.  
  16.     // Вертикальный и горизонтальный сдвиг для первого слоя
  17.     shift1=Math.round(sh_1*mouse_x/body.clientWidth);
  18.     shift2=70+Math.round(mouse_y*20/body.clientHeight);
  19.  
  20.     elem=document.getElementById('layer1');
  21.     elem.style.left=shift1+'px';
  22.     elem.style.top=shift2+'px';
  23.  
  24.     // Вертикальный и горизонтальный сдвиг для второго слоя
  25.     shift1=Math.round(sh_2*mouse_x/body.clientWidth);
  26.     shift2=20+Math.round(mouse_y*10/body.clientHeight);
  27.  
  28.     elem=document.getElementById('layer2');
  29.     elem.style.left=shift1+'px';
  30.     elem.style.top=shift2+'px';
  31. }
Как видите, ничего сложного. Рабочий пример многослойного изображения с эффектом параллакса вы можете посмотреть на демонстрационной странице. Для активации эффекта просто перемещайте курсор мыши по экрану и смотрите как при этом будет меняться картинка.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 12465 | Комментариев: 13

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Александр (06.12.2015 в 14:31):
Спасибо огромное за статью, копался долго а тут все разжёвано до мелочей, только почему пока не добавишь контента на страницу нужный див только в стороны движется а вверх и вниз не хочет? в любом случае Вы молодец)
mate (06.01.2015 в 14:13):
spasibo bro
ezfalc0n (16.09.2013 в 20:49):
Здорово, еще бы плавности. Предложу заказчику шапку переделать =)
ManHunter (12.08.2013 в 18:10):
Да, так будет красивее.
Jeka (12.08.2013 в 16:22):
var e = e ? e : window.event;  =>  var e = e || window.event;
ManHunter (12.08.2013 в 14:20):
Если замечание по делу, то почему бы к нему не прислушаться.
Grey (12.08.2013 в 14:19):
Супер. Что-то ты добрый сегодня, думал воспользуешся правилом "моя территория мои правила" (пост №1)
ManHunter (12.08.2013 в 12:46):
Заменил на самолетики.
Grey (12.08.2013 в 12:45):
Теоретически большие облпка должны быть ближе
ManHunter (12.08.2013 в 11:27):
Ну а что мешает добавить на картинку еще один слой, который вообще не будет двигаться? +1 правило в CSS и +1 строчка в html.
Андрей (12.08.2013 в 11:25):
Эх, ещё бы неподвижную луну или солнце.
Grey (12.08.2013 в 08:28):
класс
master-ufa (12.08.2013 в 07:45):
Очень вредная "демонстрационная страница" - полчаса облака двигал, потом ещё коллегам по работе показал. До обеда не работали :-)))

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2018
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.0033 сек.) / Память: 4.75 Mb
Наверх