Паралакс-ефект в веб-дизайні: принцип технології та приклади паралакс сайтів

  1. Недоліки паралакс-ефекту
  2. альтернативне рішення
  3. висновок
  4. Паралакс на javascript
  5. Приклади сайтів з паралакс-ефектом

Паралакс (Parallax, грец. Зміна, чергування) - це зміна видимого положення об'єкту по відношенню до віддаленого фону в залежності від знаходження спостерігача. Першочергово цей термін вживається для природних явищ, в астрономії і геодезії. Наприклад, ось такий зсув сонця щодо стовпа при відображенні у воді і є паралакс в природі.

Зміна, чергування)

У веб-дизайні паралакс-ефект або паралакс-скролінг - це спеціальна техніка, коли фонове зображення в перспективі рухається повільніше, ніж елементи переднього плану. Ця технологія застосовується все частіше, так як виглядає дійсно ефектно і круто.

Досягається такий ефект тривимірного простору за допомогою декількох шарів, які накладаються один на одного і при прокручуванні рухаються з різною швидкістю. За допомогою такої технології можна створити не тільки штучний тривимірний ефект, можна застосовувати її до іконок, зображень та інших елементів сторінки.

За допомогою такої технології можна створити не тільки штучний тривимірний ефект, можна застосовувати її до іконок, зображень та інших елементів сторінки

Недоліки паралакс-ефекту

Основний мінус параллакса - це проблеми з продуктивністю сайту. Виглядає все красиво і стильно, але застосування javascript / jQuery, за допомогою яких і створюється ефект паралакса, в значній мірі ускладнює сторінку і дуже знижує швидкість її завантаження. Це відбувається тому, що в його основі лежать складні обчислення: javascript доводиться контролювати стан кожного пікселя на екрані. У деяких випадках ситуація ускладнюється ще й проблемами з кросбраузерністю і кроссплатформенную. Багато розробники рекомендують використовувати паралакс-ефект стосовно максимум двом елементам сторінки.

альтернативне рішення

З появою CSS 3 завдання трохи спростилася. З його допомогою можна створити дуже схожий ефект, який буде набагато економічніше в плані ресурсозатрат. Суть в тому, що контент сайту розміщується на одній сторінці, а переміщення по підсторінками відбувається методом CSS 3-переходу. Це той же паралакс, але з деяким відмінністю: справа в тому, що досягти того, щоб переміщення здійснювалося з різною швидкістю, використовуючи тільки CSS 3, неможливо. Крім того, даний стандарт підтримується не всіма сучасними браузерами. Тому і тут є свої складності.

висновок

Ефект паралакса хоч і популярний, але далеко не всі поспішають його використовувати при створення сайту через вишеозвученних проблем. Мабуть, поки просто потрібен час, щоб технології змогли подолати виниклі труднощі. А поки такий варіант можна використовувати на сайтах-одностранічнік : Так він точно запам'ятається і зуміє утримати користувача.

Паралакс на javascript

  • jQuery -ефект паралакс скролінгу - плагін, які прив'язує ефект паралакс до руху коліщатка миші
  • Scrolldeck - плагін для створення паралакс-ефекту
  • jParallax - перетворює елементи сторінки в абсолютно позиційований шари, що рухаються відповідно до мишкою

Приклади сайтів з паралакс-ефектом

digitalhands.net

grabandgo.pt

activatedrinks.com (сайт закрився)

com (сайт закрився)

Повернутися назад

Статті по темі:

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: