Створення сайтів Львів067 607 57 84
МЕНЮ

Паралакс

Паралакс можна любити і не любити, але незалежно від ваших вподобань, використувувати його ви таки змушені. Якщо підійти до справи з розумом, то паралакс зможе додати вашому веб-ресурсу витонченості та сучасності. Однак в процесі реалізації паралакс не такий і простий. Ми спробуємо коротко зосередитися на крос-браузерних особливостях його застосування.

Проблеми паралакса

  1. Не використовуйте події прокрутки або background-position для реалізації паралакса.
  2. Для Mobile Safari використовуйте position: sticky для забезпечення поширення ефекту паралакса.
  3. Для більш правильного ефекту використовуйте CSS 3D трансформації.

Розглянемо детальніше ці дві проблеми.

Використання подій прокрутки
Ключова вимога паралакса полягає в тому, що він повинен бути пов'язаний з прокруткою сторінки. Кожній зміні позиції скрола має відповідати зміна позиції елементів, до яких застосовується паралакс. Це звучить просто, але важливим механізмом сучасних браузерів є можливість працювати асинхронно. Це стосується, в нашому випадку, і події scroll. В більшості браузерів обробники подій scroll виконуються за принципом «краще з можливого» (best- effort) і не гарантують анімацію при кожній зміні положення скрола. Ця важлива інформація говорить нам про те, чому ми повинні уникати заснованого на JavaScript рішення, яке переміщує елементи на основі подій прокрутки: JavaScript не гарантує, що паралакс буде відповідати позиції скрола. В старіших версіях Mobile Safari події прокрутки фактично спрацьовували вкінці прокрутки, що унеможливило реалізацію ефекту паралакса на основі подій прокрутки. У більш новіших версіях анімація відображається під час прокрутки, але, як і в Chrome, за принципом «краще з можливого». Якщо основний потік зайнятий якою-небудь іншою роботою, події прокрутки не виконуватимуться негайно, що означає, що ефект паралакса буде втрачено.

Оновлення background-position
Інша ситуація, якої ми хотіли б уникнути - це перемальовка на кожному кадрі. Багато рішень намагаються змінити розміщення фону, щоб забезпечити ефект паралакса, тим самим змушуючи браузер перемальовувати порушені частині сторінки при прокручуванні. Таке рішення може бути досить дорогим, щоб значно загальмувати анімацію. Якщо ми хочемо реалізувати ефект паралакса, ми повинні застосувати рішення на основі апаратно прискорених властивостей (на даний момент це transform і opacity), що не залежать від подій прокрутки.

CSS в 3D
Найбільш ефективною технікою будуть наступні дії.Встановити для контейнера властивість overflow-y: scroll (і можливо overflow-x: hidden). Для цього ж елемента застосувати значення perspective, а властивість perspective-origin встановити в top left або 0 0. Для дочірніх елементів застосувати переміщення по осі Z і масштабувати їх, щоб забезпечити ефект паралакса, не впливаючи на їх розмір на екрані.

CSS для цього виглядає так:

                            
.container {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    perspective: 1px;
    perspective-origin: 0 0;
}

.parallax-child {
    transform-origin: 0 0;
    transform: translateZ(-2px) scale(3);
}
                            
                        

Ці правила можуть бути застосовані до фрагмента коду:

                            
<div class="container">
    <div class="parallax-child"></div>
</div>
                            
                        

Якщо вам потрібно готове рішення, візьміть Parallax helper JS зі сховищ UI Element Samples, де ви зможете переглянути демоверсію обраних рішень.