Реалізація паралакс-ефекту на CSS знімає всі ці питання і дозволяє браузеру використовувати апаратне прискорення. При цьому результат узгоджується з частотою кадрів, і скролінг виходить гладким. Ви також можете комбінувати ефект з іншими особливостями CSS, такими як media queries або supports - і отримати адаптивний паралакс.
Перш, ніж ми заглибимося в те, як працює ефект, давайте створимо якусь каркасну розмітку.
І додамо стилі:
Клас parallax - це те місце, де буде відбуватися магія. Ми визначили властивості height і perspective для цього класу, тим самим створили ефект глибини. Властивість overflow-y: auto дозволяє скролл контент всередині елемента звичайним способом, але тепер вкладені елементи будуть отрісовиваться щодо фіксованої перспективи. У цьому ключовий момент у створенні ефекту паралакса.
Далі розглянемо клас parallax__layer. Як підказує назва, цей клас буде визначати шар для елементів, до яких буде застосовано ефект паралакса. Цей елемент абсолютно позиційований і займає весь контейнер.
Для простоти, я додав тільки два шари з різними швидкостями - ми додамо більше далі.
корекція глибини
Оскільки паралакс створюється за допомогою 3D-перетворень, переміщення елемента уздовж осі Z має побічний ефект - при переміщенні елемента ближче або далі змінюється його розмір. Щоб виправити це, ми повинні застосувати трансформацію scale () до елементу, тоді він буде отрісовиваться в оригінальному розмірі:
Коефіцієнт масштабування можна розрахувати за формулою 1 + (translateZ * -1) / perspective. Наприклад, якщо властивість perspective одно 1px, а елемент переміщений на -2px, коефіцієнт масштабування дорівнює 3:
Управління швидкістю шару
Швидкість шару управляється комбінацією значення перспективи і зміщення по осі Z. Елементи з негативними значеннями зсуву переміщаються повільніше, ніж з позитивними. Чим далі значення від 0, тим більш вираженим виходить ефект паралакса (тобто елемент c translateZ (-10px) буде рухатися повільніше, ніж з translateZ (-1px)).
Підрозділи з параллаксом
Попередній приклади показують базову техніку створення параллакса з дуже простим контентом. Але більшість сайтів з параллаксом розділені на секції, в кожній з яких застосовується цей ефект незалежно. Давайте розглянемо, як це зробити.
Для початку нам необхідний елемент parallax__group, в якому ми згрупуємо шари:
CSS стилі для цього елемента:
У цьому прикладі я хочу, щоб кожна група заповнювала вьюпорте, тому я поставив висоту рівну 100vh, однак для кожної групи можуть при необхідності бути задані свої значення. Властивість transform-style: preserve-3d запобігає виравніваеніе дочірніх елементів в одній площині, а властивість position: relative дозволяє абсолютно спозиционировать щодо нього дочірні елементи.
При угрупованню елементів необхідно пам'ятати одне важливе правило, ми не можемо обрізати вміст групи. Установка overflow: hidden для елемента parallax__group зламає ефект паралакса. Це призводить до того, що дочірні елементи можуть виходити за межі контейнера, тому тут потрібно правильно розставити значення z-index у груп, щоб вміст правильно показувалося / ховалося при прокручуванні сторінки.
Немає чітких правил для боротьби з нашаруванням елементів, тому що конкретні реалізації будуть залежати від дизайну. Налагодити нашарування набагато простіше, якщо ви можете бачити, як працює паралакс - для цього можна застосувати просту трансформацію до групи елементів:
Подивіться на наступний приклад, і не забудьте зазначити опцію налагодження!
підтримка браузерами
- Firefox, Safari, Opera і Chrome підтримують цей ефект.
- У Firefox є невелика проблема з вирівнюванням.
- IE поки не підтримує властивість preserve-3d, тому ефект паралакса працювати не буде. Це нормально, але ви все одно повинні переконатися, що вміст коректно відображається без паралакса - ну ви знаєте, прогресивне поліпшення і все таке!
Знайшли друкарську помилку? Orphus: Ctrl + Enter