Помилки про паралакс на сайтах - Сибірікс
Паралакс на сучасних сайтах застосовується настільки часто, що вже став загальноприйнятим стандартом. Однак багато хто досі не має чіткого уявлення про те, що таке паралакс.
Роб Палмер (Rob Palmer), дизайнер і креативний директор з Великобританії, у своїй статті The Troublesome Misconception of Parallax in Web Design розставляє крапки в цьому питанні, показує, чим паралакс відрізняється від просто анімації на сайті.
Паралакс – це зміна видимого положення об'єкта щодо віддаленого фону залежно від положення спостерігача.
Отже, для досягнення ефекту паралакса предмет повинен займати видиме положення і реагувати на зміни середовища, в якому знаходиться. По суті, ми говоримо про сприйняття глибини чи стереоскопічний зір. Воно дозволяє нам поєднувати дві окремі сцени в одну з урахуванням відстані між ними.
Погляньмо на кілька сайтів, на яких, як запевняють їх розробники або користувачі, застосовується паралакс.
1. Nytimes.com
2. Life of Pi
3. Shibui.me
4. Scytale.pt
5. Madebyblock.com
На жодному з них не застосовується паралакс. Тут була лише імітація руху, на який ніяк не чекає користувач, і ще — ковзання двох площин одна над одною на різній швидкості прокручування.
Це не паралакс. Чому? Повернімося до нашого визначення. Де об'єкт? Де дві лінії погляду, які можна поєднати в одну? Без виконання цих умов не можна говорити про паралакс.
Як це працює у реальному житті?
Тепер пересуньте пристрій так, щоб він не потрапляв у поле вашого зору, і продовжуйте робити ті ж самі рухи. Тепер ви бачите тільки стіну з різних кутів зору, а зміни восвітленні не дозволяють "включитися" стереоскопічному зору.
Монітор розташований ближче до вас, а не до стіни, тому може здатися, що він рухається. Така оптична ілюзія надає вам відчуття глибини.
Якщо ви нахилите голову вліво з відкритими очима, зафіксуєте своє положення і закриєте праве око, то зможете побачити набагато меншу ділянку стіни. Так влаштований наш бінокулярний зір: ліве око дивиться на стіну під гострішим кутом, тому ми не бачимо «повної картини». Якщо ж, не змінюючи положення, відкрити праве око і закрити ліве, ви зможете побачити стільки ж, скільки бачили до цього двома очима відразу.
Наш мозок розпізнає невідповідності між тим, що бачать наші очі окремо. Якщо один із них може бачити «другий план», а другий — ні, мозок поверне зображення на обидва ока, але вже без відчуття глибини.
На цьому все із бінокулярним зором. Розуміння того, як воно працює, важливе для розуміння істинного паралаксу.
Отже, що вам знадобиться для досягнення ефекту паралаксу у веб-дизайні?
Паралакс у веб-дизайні – це імітація стереопсису із реального життя. Ми вже зазначили, що нам потрібен об'єкт та дві лінії зору, щоб ефект паралаксу запрацював.
Таким чином, до сайту висуваються такі вимоги:
- Потрібен користувач або початкова точка відліку.
- Потрібен об'єкт.
- Потрібен фон або віддалена точка відліку.
- І, нарешті, дія, яка б запускала рух.
Відповідно, на деяких сайтах зі списку вище можна реалізувати паралакс. Шляхом додавання об'єкта.
Візуально ефект паралаксу відрізнятиметься від звичайних рухомих блоків дуже суттєво.
Блискучий приклад паралаксу - це parallax.js, де об'єкти ізадній план не тільки реагують на переміщення курсору, а й відчувають кут нахилу планшетів з гіроскопом.
На додаток до оригіналу
Паралакс-ефект сьогодні порівняємо за популярністю, мабуть, із слайдерами-каруселями п'ять років тому. Хоча варто зауважити, що останні й досі успішно експлуатуються.
Якщо не пускатися в холіварні буркотіння на тему «це тру-паралакс, а це ні», можна вивести таку формулу: і паралакс і не-паралаксова анімація роблять сайт живішим.
Але оскільки наш блог ніколи не обмежувався аргументацією на кшталт «бо це красиво», то додамо до вищесказаного кілька тез, які пояснюють.Навіщо паралакс-ефект потрібен вашому сайту
Насправді причини найпростіші.
Отже, дякую Робу за статтю та докладні наукові докази. Ті, хто читав з планшета, можуть наостанок тапнути по картинці і пограти з гіроскопом;)