Ефект паралакса у астрономії, фотографії, веб-дизайні

Опубликованно 25.11.2017 02:06

Оптичні ілюзії - один з найулюбленіших ходів дизайнерів і художників. Вони допомагають привернути увагу як до оформлення приміщення, зображення на картині, так і до змісту сайту, урізноманітнити інтерфейс на якому-небудь пристрої. Сьогодні ми розповімо вам про один такий прийом, який називається ефектом паралакса. Почнемо з визначення.Що таке паралакс?

Паралакс (грец. ???????? - "чергування", "зміна чого-небудь") - так називається зміна видимого положення предмета щодо віддаленого фону в залежності від розташування спостерігача.

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

Тут розрізняються такі різновиди героя нашої розповіді:Геоцентричної (добовий) - різниця напрямків на один і той же астрономічний об'єкт з певної точки на поверхні нашої планети (топоцентрический вектор) і з центру її мас (геоцентричної вектор).Річний - зміни напрямків на астрономічний об'єкт, пов'язані з обертанням навколо Сонця нашій Землі.Віковий - зміна видимого положення астрономічного об'єкта на небесній сфері поєднання власних його обертань і руху Сонячної системи в межах галактики.

В фотографії

Розглянемо ефект паралакса у фотомистецтві. Тут також він зустрічається кількох типів:Паралакс видошукача - зображення, що бачить фотограф в незеркальном оптичному видошукачі, не збігається з тим, що вийде на самій фотографії. Часто це проявляється при зйомці близько розташованих предметів.Паралакс далекоміра - кут, під яким помітний шуканий об'єкт під час наведення на різкість проводиться за допомогою оптичного далекоміра).Бінокулярний (стереоскопічний) паралакс - кут, під яким фотографують предмет стереоскопічним фотоустройством. Схожий з бінокулярний зір.Тимчасової паралакс - спотворення форми предмета даними ефектом, що проявляється при зйомці фотоапаратом, що має шторний затвор. Помітно при запечатлении чогось швидко рухається. Якщо об'єкт тримає шлях в сторону щілини затвора, то він буде розтягнутий, в іншому випадку - навпаки.

У веб-дизайні

Тут ефект паралакса (по-іншому - паралакс-скролінг) - спеціальний прийом, при якому фон в перспективі рухається повільніше головного плану. Останнім виступає текст, зображення.

Як зробити ефект паралакса? Створюється 3D-простір за допомогою декількох фонів, які при їх прокручуванні починають рухатися з різною швидкістю. Виглядає досить видовищно і ефектно.

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

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

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

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

Вихід у тому, щоб особливо не перезавантажувати сайт елементами з ефектом паралакса, досить 1-2 на одній сторінці. Ще один спосіб - використання CSS3. Він допомагає створити дуже схожий ефект, який при цьому менш ресурсозатратне. Але має свої мінуси: тільки з його допомогою паралакс-скролінгу досягти неможливо. Крім того, CSS3 підтримують не всі сучасні браузери.Приклади у веб-дизайні

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

В інтерфейсі різних ОС теж застосовується така ілюзія. Зокрема для iOS 7 ефект паралакса вже був характерний.

Таким чином, об'єкт нашого оповідання актуальний у багатьох областях. Останнім часом він міцно влаштувався у веб-дизайні, що, однак, не гарантує його універсальною принади для всіх сайтів.

Категория: Техника