Новости
- Недоліки паралакс-ефекту
- альтернативне рішення
- висновок
- Паралакс на javascript
- Приклади сайтів з паралакс-ефектом
Паралакс (Parallax, грец. Зміна, чергування) - це зміна видимого положення об'єкту по відношенню до віддаленого фону в залежності від знаходження спостерігача. Першочергово цей термін вживається для природних явищ, в астрономії і геодезії. Наприклад, ось такий зсув сонця щодо стовпа при відображенні у воді і є паралакс в природі.
У веб-дизайні паралакс-ефект або паралакс-скролінг - це спеціальна техніка, коли фонове зображення в перспективі рухається повільніше, ніж елементи переднього плану. Ця технологія застосовується все частіше, так як виглядає дійсно ефектно і круто.
Досягається такий ефект тривимірного простору за допомогою декількох шарів, які накладаються один на одного і при прокручуванні рухаються з різною швидкістю. За допомогою такої технології можна створити не тільки штучний тривимірний ефект, можна застосовувати її до іконок, зображень та інших елементів сторінки.
Недоліки паралакс-ефекту
Основний мінус параллакса - це проблеми з продуктивністю сайту. Виглядає все красиво і стильно, але застосування javascript / jQuery, за допомогою яких і створюється ефект паралакса, в значній мірі ускладнює сторінку і дуже знижує швидкість її завантаження. Це відбувається тому, що в його основі лежать складні обчислення: javascript доводиться контролювати стан кожного пікселя на екрані. У деяких випадках ситуація ускладнюється ще й проблемами з кросбраузерністю і кроссплатформенную. Багато розробники рекомендують використовувати паралакс-ефект стосовно максимум двом елементам сторінки.
альтернативне рішення
З появою CSS 3 завдання трохи спростилася. З його допомогою можна створити дуже схожий ефект, який буде набагато економічніше в плані ресурсозатрат. Суть в тому, що контент сайту розміщується на одній сторінці, а переміщення по підсторінками відбувається методом CSS 3-переходу. Це той же паралакс, але з деяким відмінністю: справа в тому, що досягти того, щоб переміщення здійснювалося з різною швидкістю, використовуючи тільки CSS 3, неможливо. Крім того, даний стандарт підтримується не всіма сучасними браузерами. Тому і тут є свої складності.
висновок
Ефект паралакса хоч і популярний, але далеко не всі поспішають його використовувати при створення сайту через вишеозвученних проблем. Мабуть, поки просто потрібен час, щоб технології змогли подолати виниклі труднощі. А поки такий варіант можна використовувати на сайтах-одностранічнік : Так він точно запам'ятається і зуміє утримати користувача.
Паралакс на javascript
- jQuery -ефект паралакс скролінгу - плагін, які прив'язує ефект паралакс до руху коліщатка миші
- Scrolldeck - плагін для створення паралакс-ефекту
- jParallax - перетворює елементи сторінки в абсолютно позиційований шари, що рухаються відповідно до мишкою
Приклади сайтів з паралакс-ефектом
digitalhands.net
grabandgo.pt
activatedrinks.com (сайт закрився)
