Паралакс-скролінг
Відео: Паралакс скролінг
Щороку ми спостерігаємо появу і зникнення різних тенденцій в веб-дизайні. А іноді трапляється так, що певна «фішка» через деякий час починає повсюдно використовуватися знову.
У 2012 році багато зарубіжні сайти використовували досить цікавий ефект, запозичений з ігор - паралакс-скролінг. Це взагалі був час моди на 3D, ось і сайти намагалися зробити тривимірними, багатошаровими.
Через рік-другий про паралаксі якось забули, і ті сайти, які були яскравими прикладами його застосування, пережили редизайн, зробивши вибір на користь інших візуальних прийомів. Сьогодні ж цей ефект переживає відродження, і про нього знову почали говорити.
Згадаймо і ми, що це таке, де його застосовувати і як, а також розглянемо кілька яскравих прикладів використання параллакса.
Паралакс-скролінг - що за звір?
Паралакс-ефект на сайтах розпізнати дуже просто - використовується кілька фонів, які, здається, рухаються з різними швидкостями, щоб створити відчуття глибини (створення штучного 3D-ефекту). Цей прийом щосили застосовувався в іграх «старого зразка», також є цікавою тенденцією в веб-дизайні.
Термін походить від грецького «Parallaxis», що означає «зміна». Сьогодні ця тенденція заново прокладає собі шлях в світі веб-дизайну.
Паралакс-скролінг може бути як стандартним, вертикальним, так і горизонтальним, і із змінним напрямком.
Це дуже цікавий дизайнерський концепт, який виглядає просто приголомшливо, але разом з тим вимагає кропіткої роботи. Потрібно не тільки продумати реалізацію, але і добре попрацювати над оптимізацією - інакше на мобільних пристроях або на великих екранах шари можуть гальмувати, і будуть не те що прикрашати, а просто спотворювати ваш твір.
Застосовуючи паралакс, постарайтеся не зробити одну основну помилку, яка часто зустрічається на такого роду сайтах - основного шару надають дуже велику швидкість руху, і в підсумку користувач не може нормально подивитися інформацію або фото. Трохи крутнув коліщатко - а фото або текст уже поїхали далеко вниз, спробував повернути - все сховалося вгору. Як тут, наприклад. На етапі оптимізації зверніть увагу на швидкість прокрутки шарів, основний повинен, в ідеалі, рухатися з тією ж швидкістю, що і скроллбар. А от з іншими елементами, які служать для прикраси, можете сміливо грати.
Де застосовувати?
Паралакс-скролінг виглядає відмінно на тих сайтах, де мало контенту. Це ідеальне рішення для одностранічнік, сайтів-візиток.
Припустимо, у вас є тільки коротка інформація про компанію, контакти та кілька фотографій. Простий сайт буде виглядати з таким наповненням нудно і нецікаво. Але от якщо додати сюди незвичайні ефекти типу параллакса - цей ресурс запам`ятається користувачам надовго!
Привернути увагу людей зараз насправді дуже складно. Багато сайтів рясніють і флеш-ефектами, і звуковими накладеннями, і іншими незвичайними «фішками». Кожен намагається виділитися, як тільки може - тому дизайнери стали знову повертатися до паралаксу.
Добре підійде цей ефект також для одностранічнік, які представляють товар або лінійку товарів. Продумавши концепцію, можна зробити щось дійсно неповторне.
кілька прикладів
А тепер перейдемо від теорії до практики, і розглянемо кілька сайтів, які застосовують паралакс-скролінг. Можливо, в цій збірці ви знайдете у натхнення або знайдете кілька оригінальних ідей.
Melanie F.
Перед вами - оригінальний каталог взуття, який, крім параллакса, використовує ще один повернувся тренд - звуковий ефект. Разом ці прийоми створюють особливу атмосферу.
Сторінка, як бачите, рухається з однією швидкістю, а геометричні фігури - з іншого, трохи повільніше.
The Boat
Тут паралакс знову йде рука об руку зі звуком, і допомагає розповісти цілу історію. Крім 3D ефекту, ми бачимо тут і інші модні тенденції - чорно-білі кольори оформлення, малюнки від руки, рукописні шрифти. Якщо вам ліньки крутити коліщатко - увімкніть автоскроллінг і насолоджуйтеся.
Giampiero Bodino
Відео 14 1 паралакс скролінг вертикальний
Ласкаво просимо в Мілан! Пориньте у світ італійського мистецтва!
Тут ми бачимо ще одне незвичайне рішення - для перегляду сайту потрібно не крутити коліщатко, а протягувати наповнення кнопкою мишки. Причому сторінка може простягатися як в сторони, так і вниз.
Можна також переходити по списку внизу, сайт сам покаже вам потрібне місце.
Mas Industries
А ви б змогли так оригінально представити запчастини та інше залізо?
Це приклад того, як паралакс може допомогти зробити сайт про товар запам`ятовується і цікавим, навіть якщо товар дуже специфічний і призначений для вузького кола людей.
L`Amor Fou
А ось - цікавий варіант сайту ресторану. Тут мало текстового контенту, і дизайнер знайшов геніальне рішення - поєднати його з яскравими фотографіями, які розташовані на іншому шарі і рухаються з іншою швидкістю. Досить свіжо і оригінально.
Lois Jeans SS 15
Тут ми бачимо чудові 3D-ефекти, для створення яких використано і відео на задньому плані, і фото різного розміру, і навіть розмиття тих елементів, які немов знаходяться прямо «перед носом» користувача. І різна швидкість руху шарів, звичайно ж.
Feed Music
Яскравий приклад нестандартного підходу до паралаксу. Рухомий сам по собі фон в поєднанні з текстом, який прокручується вниз-3D-моделі, що створюються справа-мінливі кольори фону при прокручуванні - все це робить сайт по-справжньому незабутнім.
Giaco Morelli
Тут змусити фотографії «бігати» можна, просто водячи мишкою по екрану. Разом з параллаксом дизайнер поєднував ще один зароджується тренд - перекреслені посилання.
Your Time 4
Веселенький і дуже оригінальний сайт. Мальовані персонажі + паралакс = незабутня атмосфера!
Marcin Dmoch
Відео: Створюємо паралакс (2.5D) ефект в photoshop
І, в самому кінці вибірки - приклад сайту-портфоліо і застосуванням паралакс-скролінгу. Все дуже скромно, але виглядає цікаво.
Інструменти для створення паралакс-ефекту
У тому, що паралакс виглядає дійсно круто, переконалися. А тепер підкажемо вам, за допомогою яких інструментів можна створити таку красу.
Перший - це плагін для створення незвичайних ефектів прокрутки Scrollorama.
Ще кілька плагінів:
jQuery-Parallax-Slider
jParallax
jQuery Scroll Path
Якщо ви використовуєте движок WordPress, то можете придбати спеціальну тему - Hero WordPress Theme, яка ідеально підходить для сайту-портфоліо. Її особливість якраз і полягає в паралакс-ефекті на банері головної сторінки.
