Створення ефектів паралакс-прокрутки за допомогою CSS та JavaScript
Добре, давайте зануримося в чудернацький та гіпнотичний світ паралаксної прокрутки! Складно, чи не так? Не хвилюйтеся, це таке ж загадкове, як надмірно захоплююче «Пам’ятай! Не відкривай мою шафу» вашої мами під час святкового сезону.
Визначення ефекту паралаксної прокрутки
Ви знаєте, що нудне? Прямі лінії. Ви знаєте, що цікаве? Гори та долини. Ефект паралаксної прокрутки полягає в тому, що ваш веб-сайт отримує захоплюючу текстуру, схожу на вершини та спуски американських гірок. Простими словами, деякі елементи переміщуються швидше, ніж інші.
Тепер ви можете запитати: «Чому мені потрібен веб-сайт-гірка?». Просто, це дозволяє вашим веб-сторінкам виділятися, привертати увагу та збільшувати залучення користувачів. Не забувайте, що дрібниці (з використанням у міру) можуть змусити людей залишатися. Магія та загадка завжди цікавлять людей!
Почнемо: CSS чи JavaScript?
Розкрити потужність паралаксної прокрутки можна за допомогою CSS, JavaScript або обох. CSS – це макіяж, а JS додає барвисті блискітки.
Однак пам’ятайте, коли ваш вчитель фізики казав: «З великою силою приходить….» барабанна дробова установка «… велика відповідальність!». З CSS легко створювати базові ефекти паралаксної прокрутки, але бережіть газ! JavaScript, з іншого боку, схожий на отримання більш розкішного інструментарію. Він може допомогти нам створити більш складний ефект паралаксної прокрутки.
Будьте стильними з CSS
Створення простого ефекту паралаксу за допомогою CSS – це як з’їдання кавунчика. Ні, я не маю на увазі стиль Марії-Антуанетти. Вам просто потрібні правильні інгредієнти – пробачте за сирість.
Використовуйте властивість background-attachment, встановлену на fixed. Цей маленький трюк створює гарну ілюзію, де фонове зображення рухається з іншою швидкістю порівняно з контентом на передньому плані. Щіпка CSS, і ось вона!
Кодування ефекту паралаксу за допомогою CSS
.parallax {
/ Використовуване зображення /
background-image: url("yourImage.jpg");
/ Встановлення конкретної висоти /
min-height: 500px;
/ Створення ефекту паралаксної прокрутки /
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Приєднуйтесь до поїзда JavaScript
Добре, зараз поговоримо про JavaScript, Майкл Джордан веб-дизайну!
На відміну від CSS, JavaScript може контролювати швидкість та позицію прокрутки, даруючи нам можливість створювати шари та контролювати їх рухи індивідуально. Очевидно, хтось їв свої кодові плакучки!
Кодування ефекту паралаксу за допомогою JavaScript
window.addEventListener('scroll', function(e) {
var scrolled = window.pageYOffset;
const background = document.querySelector(".parallax");
background.style.top = -(scrolled * 0.2) + 'px';
});
З цим кожного разу, коли ви прокручуєте, він буде змінювати верхню позицію елемента з класом .parallax. І верхня позиція буде змінюватися з меншою швидкістю, ніж передній план, що надасть цьому гарний ефект паралаксу.
Вітаємо! Тепер ви готові створити деяку магію на своїх веб-сторінках за допомогою ефекту паралаксної прокрутки. Пам’ятайте, що помилки – це нормально, навіть піца не може бути ідеальною, не кожен шматок може мати ідеальний сирний пул! Щасливого кодування!
