Створення ефектів паралакс-прокрутки за допомогою CSS та JavaScript

Добре, давайте зануримося в чудернацький та гіпнотичний світ паралаксної прокрутки! Складно, чи не так? Не хвилюйтеся, це таке ж загадкове, як надмірно захоплююче «Пам’ятай! Не відкривай мою шафу» вашої мами під час святкового сезону.

H2: Визначення ефекту паралаксної прокрутки

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

Тепер ви можете запитати: «Чому мені потрібен веб-сайт-гірка?». Просто, це дозволяє вашим веб-сторінкам виділятися, привертати увагу та збільшувати залучення користувачів. Не забувайте, що дрібниці (з використанням у міру) можуть змусити людей залишатися. Магія та загадка завжди цікавлять людей!

H2: Почнемо: CSS чи JavaScript?

Розкрити потужність паралаксної прокрутки можна за допомогою CSS, JavaScript або обох. CSS – це макіяж, а JS додає барвисті блискітки.
Однак пам’ятайте, коли ваш вчитель фізики казав: «З великою силою приходить….» барабанна дробова установка «… велика відповідальність!». З CSS легко створювати базові ефекти паралаксної прокрутки, але бережіть газ! JavaScript, з іншого боку, схожий на отримання більш розкішного інструментарію. Він може допомогти нам створити більш складний ефект паралаксної прокрутки.

H2: Будьте стильними з CSS

Створення простого ефекту паралаксу за допомогою CSS – це як з’їдання кавунчика. Ні, я не маю на увазі стиль Марії-Антуанетти. Вам просто потрібні правильні інгредієнти – пробачте за сирість.
Використовуйте властивість background-attachment, встановлену на fixed. Цей маленький трюк створює гарну ілюзію, де фонове зображення рухається з іншою швидкістю порівняно з контентом на передньому плані. Щіпка CSS, і ось вона!

H3: Кодування ефекту паралаксу за допомогою CSS

css
.parallax {
  / Використовуване зображення /
  background-image: url("yourImage.jpg");
  / Встановлення конкретної висоти /
  min-height: 500px; 
  / Створення ефекту паралаксної прокрутки /
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

H2: Приєднуйтесь до поїзда JavaScript

Добре, зараз поговоримо про JavaScript, Майкл Джордан веб-дизайну!
На відміну від CSS, JavaScript може контролювати швидкість та позицію прокрутки, даруючи нам можливість створювати шари та контролювати їх рухи індивідуально. Очевидно, хтось їв свої кодові плакучки!

H3: Кодування ефекту паралаксу за допомогою JavaScript

javascript
window.addEventListener('scroll', function(e) {
  var scrolled = window.pageYOffset;
  const background = document.querySelector(".parallax");
  background.style.top = -(scrolled * 0.2) + 'px';
});

З цим кожного разу, коли ви прокручуєте, він буде змінювати верхню позицію елемента з класом .parallax. І верхня позиція буде змінюватися з меншою швидкістю, ніж передній план, що надасть цьому гарний ефект паралаксу.
Вітаємо! Тепер ви готові створити деяку магію на своїх веб-сторінках за допомогою ефекту паралаксної прокрутки. Пам’ятайте, що помилки – це нормально, навіть піца не може бути ідеальною, не кожен шматок може мати ідеальний сирний пул! Щасливого кодування!