Паралакс-ефекти — це популярний спосіб додавання ілюзії глибини на веб-сторінки, який полягає у створенні візуального ефекту, коли фонове зображення рухається повільніше, ніж зміст на передньому плані. У WordPress це можна здійснити за допомогою CSS. Ось кілька базових та просунутих прикладів, як це зробити.
Базові приклади
1. Простий паралакс
.parallax {
background-image: url('your-image.jpg');
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Простий паралакс — це базова техніка веб-дизайну, яка створює ілюзію глибини на веб-сторінці. Цей ефект досягається завдяки фіксованому положенню фонового зображення, яке не рухається під час прокрутки сторінки, в той час як інші елементи (текст, зображення тощо) прокручуються звичайним чином. Такий підхід створює відчуття глибини та динаміки на сторінці.
Характеристики Простого Паралаксу
background-image: Це властивість встановлює фонове зображення для елемента. У прикладі використовується URL зображення (
'your-image.jpg'), який потрібно замінити на шлях до реального зображення, яке ви плануєте використовувати.height: Встановлює висоту елемента. У цьому випадку, висота фіксована на 500 пікселів, що задає висоту блоку з паралакс-ефектом.
background-attachment: Значення
fixedвказує на те, що фонове зображення буде зафіксоване і не буде рухатися разом з іншими елементами під час прокрутки сторінки.background-position: Встановлює положення фонового зображення. У цьому випадку
centerозначає, що зображення буде розташоване по центру.background-repeat: Значення
no-repeatзапобігає повторенню фонового зображення.background-size:
coverозначає, що зображення розтягується або зменшується, щоб покрити весь доступний простір, зберігаючи при цьому пропорції зображення.
Використання Простого Паралаксу
Простий паралакс ефективно використовується у різних сценаріях веб-дизайну:
Вступні секції: Часто використовується на головній сторінці або на вступних секціях веб-сайтів для привернення уваги відвідувачів.
Розділи з важливою інформацією: Для виділення певних розділів на сторінці, наприклад, розділу з відгуками клієнтів або важливими оголошеннями.
Портфоліо або галереї: Для створення вражаючого візуального ефекту у портфоліо або в фотогалереях.
Статичні сторінки: На статичних сторінках, таких як сторінка "Про нас" або "Контакти", для додавання глибини та естетичної привабливості.
Переваги
Використання простого паралаксу дозволяє досягти наступних цілей:
Підвищення залученості відвідувачів: Ефект глибини привертає увагу та покращує візуальне сприйняття.
Вишуканість дизайну: Додає сторінці сучасний та професійний вигляд.
Підкреслення важливого змісту: Дозволяє виділити ключові елементи на сторінці.
2. Паралакс зі зміною швидкості
Варіант 1:
.parallax {
background-image: url('your-image.jpg');
background-attachment: fixed;
animation: parallax-animation 10s linear infinite;
}
@keyframes parallax-animation {
from { background-position: 0% 0%; }
to { background-position: 100% 0%; }
}
Варіант 2:
.parallax {
background-image: url('your-image.jpg');
background-attachment: fixed;
animation: parallax-animation 15s linear infinite;
}
@keyframes parallax-animation {
0% { background-position: 0% 0%; }
50% { background-position: 100% 0%; }
100% { background-position: 0% 0%; }
}
Що таке паралакс зі зміною швидкості?
Паралакс зі зміною швидкості — це техніка у веб-дизайні, де фонове зображення рухається з іншою швидкістю порівняно з іншими елементами на сторінці під час прокрутки. Це створює ілюзію глибини та динаміки на сторінці. У наведених прикладах зміна швидкості досягається шляхом анімації фонового зображення за допомогою CSS.
Коментар до Прикладу 1
У першому варіанті коду створюється безперервна анімація, де фонове зображення плавно переміщується горизонтально від лівого краю до правого. Час анімації встановлено на 10 секунд, що означає, що зображення повністю переміщується з лівого краю на правий за цей час.
Коментар до Прикладу 2
Другий варіант схожий на перший, але з ключовими відмінностями в швидкості та напрямку анімації. Час анімації збільшений до 15 секунд, а також додано зворотний рух: зображення спочатку рухається з лівого краю до правого, а потім назад. Це створює більш динамічний і захоплюючий візуальний ефект.
Використання у дизайні
Вебсайти з динамічним контентом: Паралакс зі зміною швидкості може додати живості та динаміки до вебсайтів, особливо тих, які мають багато візуального контенту.
Лендінг-сторінки: Ця техніка ефективна для створення вражаючих лендінг-сторінок, де важливо зацікавити та втримати увагу користувача.
Портфоліо та креативні сайти: Для дизайнерів, художників чи фотографів паралакс може слугувати засобом підкреслення творчого підходу та виразності робіт.
Промо-сайти та маркетингові кампанії: Використання паралакс-ефектів на промо-сторінках та в маркетингових кампаніях може збільшити залученість користувачів та покращити візуальне сприйняття продукту або послуги.
Переваги використання CSS
Використання CSS для створення паралакс-ефектів зі зміною швидкості має кілька переваг:
Простота та доступність: CSS є базовим інструментом у веб-розробці, доступним без додаткових бібліотек чи фреймворків.
Контроль та гнучкість: CSS дозволяє точно налаштувати швидкість, напрямок та інші параметри анімації.
Продуктивність: CSS-анімації зазвичай менш ресурсоємні порівняно з JavaScript, що забезпечує кращу продуктивність та швидкість завантаження сторінки.
3. Багаторівневий паралакс
Варіант 1:
.parallax-background {
background-image: url('background-image.jpg');
background-attachment: fixed;
}
.parallax-foreground {
position: relative;
}
Варіант 2:
.parallax-background {
background-image: url('background-image.jpg');
background-attachment: fixed;
z-index: -1;
}
.parallax-foreground {
position: relative;
z-index: 1;
}
4. Паралакс з текстом
.parallax {
background-image: url('your-image.jpg');
background-attachment: fixed;
position: relative;
height: 500px;
}
.parallax-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
}
5. Паралакс з фіксованим фоном
.parallax {
background-image: url('your-image.jpg');
background-attachment: fixed;
background-position: center;
height: 500px;
}
6. Паралакс з різними фоновими зображеннями
Варіант 1:
.parallax {
background-image: url('your-image1.jpg');
height: 500px;
background-attachment: fixed;
}
.parallax + .parallax {
background-image: url('your-image2.jpg');
}
Варіант 2:
.parallax {
background-image: url('your-image1.jpg');
height: 500px;
background-attachment: fixed;
}
.parallax:nth-of-type(2) {
background-image: url('your-image2.jpg');
}
7. Паралакс з перекриттям
.parallax {
background-image: url('your-image.jpg');
background-attachment: fixed;
position: relative;
height: 500px;
}
.parallax::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
8. Паралакс з відео
.parallax-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
Просунуті приклади
1. Паралакс з різними рівнями швидкості
.parallax {
background-image: url('your-image.jpg');
background-attachment: scroll;
background-position: 0 0;
will-change: transform;
transform: translate3d(0, -50%, 0);
}
2. Паралакс з використанням CSS змінних
:root {
--parallax-speed: 2;
}
.parallax {
background-image: url('your-image.jpg');
background-attachment: fixed;
background-position: 0 calc(var(--parallax-speed) * 1%);
}
3. Адаптивний паралакс
@media (max-width: 768px) {
.parallax {
background-attachment: scroll;
}
}
4. Паралакс зі зміною перспективи
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
transform-style: preserve-3d;
}
Вигоди використання CSS для паралакс-ефектів
Простота реалізації: CSS дозволяє легко створювати базові паралакс-ефекти без потреби у складних скриптах.
Продуктивність: Паралакс, реалізований за допомогою CSS, зазвичай вимагає менше ресурсів, ніж JavaScript-рішення, і тому швидше завантажується та обробляється.
Сумісність з браузерами: CSS-ефекти часто краще підтримуються сучасними веб-браузерами.
Контроль над анімацією: CSS дозволяє точно контролювати швидкість та характер анімацій.
Адаптивність: За допомогою медіа-запитів CSS можна легко адаптувати паралакс-ефекти під різні розміри екранів.
Зручний хостинг для ваших сайтів на базі WordPress
Якщо ви читаєте цю статтю, то зацікавлені в хорошому хостингу для ваших сайтів на WordPress.
Ловіть пораду! Зверніть увагу на Host4Biz. Це надійний хостинг з сучасними серверами в Європі та українською командою.
А за промокодом MYHOST10 ви отримаєте знижку в 10% на першу оплату. Для цього реєструйтесь за посиланням та введіть код перед оплатою.
Висновок
Паралакс-ефекти, реалізовані за допомогою CSS, — це важливий інструмент для створення веб-сторінок у WordPress, що приковуватимуть увагу відвідувачів та забезпечать високу конверсію. Елементи з паралакс-ефектами додають глибину та інтерактивність, покращуючи загальне сприйняття сайту.
Якщо вам потрібна допомога з сайтом на WordPress, звертайтесь в Facebook та Telegram, вказані в профілі.
