Эффект параллакса на JavaScript
Эффект параллакса на JavaScript
Эффект параллакса хорошо известен в астрономии, стрелковом деле и, как ни странно, в современном веб-дизайне. Для начала давайте разберемся, что же такое параллакс вообще. Вот что нам говорят словари.
Параллакс - изменение видимого положения объекта относительно удаленного фона в зависимости от положения наблюдателя.
В веб-дизайне эффект параллакса используется в неравномерном перемещении фона, а также ближних объектов относительно дальних на многослойном изображении, что создает иллюзию объема. Это может быть вертикальный параллакс, когда при прокрутке страницы сайта фон перемещается медленнее ее содержимого, или же псевдоанимация в шапке сайте или рекламном блоке, которая активизируется при движении мыши.
Итак, мы знаем что нам нужно. Это фоновый рисунок и один или несколько слоев с прозрачным фоном. Так как фоновый рисунок тоже будет перемещаться, он должен быть по размерам немного больше того блока, где будет твориться весь этот параллакс. Рисунки слоев могут быть произвольного размера. Как правило, они значительно меньше размеров фонового рисунка. Начинаем рисовать. Для большего эффекта у нас будет фон и два слоя. Фон, понятно дело, находится на самой дальней точке обзора, один слой виртуально расположится почти на середине линии наблюдения, а второй слой будет ближе к наблюдателю. Такое расположение даст максимальный эффект объема.
Code (HTML) : Убрать нумерацию
- <div id="overall">
- <div id="layer2"></div>
- <div id="layer1"></div>
- </div>
Code (HTML) : Убрать нумерацию
- #overall {
- width: 700px;
- height: 240px;
- position: relative;
- background: url('background.jpg') no-repeat;
- background-position: 50% 50%;
- }
- #layer1 {
- position: absolute;
- top: 50px;
- z-index: 2;
- }
- #layer2 {
- position: absolute;
- top: 20px;
- z-index: 1;
- }
Code (JavaScript) : Убрать нумерацию
- document.body.onmousemove=function(e) {
- // Получить событие
- var e = e || window.event;
- var doc = document.documentElement;
- var body = document.body;
- // Получить текущие координаты мыши
- if ("\v" == "v") {
- var mouse_x = e.clientX;
- if (doc.clientLeft) { mouse_x -= doc.clientLeft; }
- if (doc && doc.scrollLeft) { mouse_x += doc.scrollLeft; }
- if (body && body.scrollLeft) { mouse_x += body.scrollLeft; }
- var mouse_y = e.clientY;
- if (doc.clientTop) { mouse_y -=doc.clientTop; }
- if (doc && doc.scrollTop) { mouse_y += doc.scrollTop; }
- if (body && body.scrollTop) { mouse_y += body.scrollTop; }
- }
- else {
- var mouse_x=e.pageX;
- var mouse_y=e.pageY;
- }
- // Параллакс
- do_parallax(mouse_x, mouse_y);
- }
Code (JavaScript) : Убрать нумерацию
- function do_parallax(mouse_x, mouse_y) {
- var body = document.body;
- var shift1, shift2, elem;
- // Пропорциональные коэффициенты сдвига для слоев
- var sh_1=20;
- var sh_2=100;
- // Вертикальный и горизонтальный сдвиг для фонового изображения
- shift1=50-Math.round((50-(mouse_x*100/body.clientWidth))/5);
- shift2=50-Math.round((50-(mouse_y*100/body.clientHeight))/3);
- elem=document.getElementById('overall');
- elem.style.backgroundPosition=shift1+'% '+shift2+'%';
- // Вертикальный и горизонтальный сдвиг для первого слоя
- shift1=Math.round(sh_1*mouse_x/body.clientWidth);
- shift2=70+Math.round(mouse_y*20/body.clientHeight);
- elem=document.getElementById('layer1');
- elem.style.left=shift1+'px';
- elem.style.top=shift2+'px';
- // Вертикальный и горизонтальный сдвиг для второго слоя
- shift1=Math.round(sh_2*mouse_x/body.clientWidth);
- shift2=20+Math.round(mouse_y*10/body.clientHeight);
- elem=document.getElementById('layer2');
- elem.style.left=shift1+'px';
- elem.style.top=shift2+'px';
- }
Просмотров: 15133 | Комментариев: 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):
Очень вредная "демонстрационная страница" - полчаса облака двигал, потом ещё коллегам по работе показал. До обеда не работали :-)))
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 36,306 раз
Поблагодарили 36,306 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |