Приклад паралакса на чистому CSS Додаємо <div> — батько з класом parallax . Усередині нього створюємо два елементи-шари з класами parallax-layer. Перший елемент – <div> із зображенням, другий – <span> із текстом. Вказуємо для <div> додатковий клас parallax-image , а для <span> parallax-text. Збережена копія

Для отримання паралакс-ефекту потрібно три компоненти:

  1. Фон або об'єкт на задньому плані, який рухається повільніше;
  2. Елемент на передньому плані, що рухається швидше; об'єкт, який рухається швидше;
  3. Дія, яка запускає рух, наприклад, скролл або переміщення курсору.

Після скролла вниз контент повинен почати перекривати собою шари паралаксу, для цього поставимо класам z-index 10 і 99 відповідно. Сам паралакс ефект буде побудований на властивості transform: translate3d. Ми будемо переміщати кожен шар залежно від позиції прокручування сторінки.