Паралакс ефект в астрономията, фотографията, уеб дизайна

Оптични илюзии - един от любимите движения на дизайнери и художници. Те помагат да се привлече вниманието към дизайна на стаята, изображението в картината и до съдържанието на сайта, за да се разнообразят интерфейсите на всяко устройство. Днес ще ви разкажем за едно такова приемане, което се нарича паралакс. Започваме с определението му.

Какво представлява паралаксът?

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

На това явление се основава бинокулярното виждане - способността за ясно разграничаване на един образ, докато го гледаме с две очи. В астрономията и геодезията паралаксният ефект се използва за измерване на разстоянията до отдалечени обекти.

Концепция в астрономията

Тук се отличават следните сортове на героя на нашия разказ:

• Геоцентрична (дневна) - разликата в посоките към същия астрономически обект от определена точка на повърхността на нашата планета (топоцентричен вектор) и от центъра на нейните маси (геоцентричен вектор).
• Годишни - промени в посоката на астрономически обект, свързан с въртенето около Слънцето на нашата Земя.
• В светската е промяната в явната позиция на астрономическия обект върху небесната сфера поради комбинацията от собствените й въртения и движението на слънчевата система в галактиката.

В снимката

Помислете за ефекта на паралакс във фотографията. Тук се среща и в няколко типа:

• Паралаксът на визьора - изображението, което фотографът вижда в неспиращ оптичен визьор, не съвпада с това, което ще се случи на самата снимка. Често това се проявява при снимане на близко разположени обекти.
• Паралаксът на търсещия обхват е ъгълът, под който желаният обект се вижда по време на фокусирането (се извършва с помощта на оптичен обхват).
• Бинокулярна (стереоскопична) паралакс е ъгълът, при който обект е фотографиран от стереоскопично фото устройство. Това е подобно на бинокулярно виждане.
• Паралакс на времето - изкривяване на формата на обект от този ефект, проявяващо се при снимане с камера със завеса. Очевидно, когато улавяте нещо, което се движи бързо. Ако обектът държи пътя към отвора на затвора, той ще бъде опънат, в противен случай - напротив.

В уеб дизайна

Тук ефектът на паралакс (по различен начин - паралакс-превъртане) - специална техника, при която фонът в бъдеще се движи по-бавно от основния план. Последният е текстът, изображението.

Как да направите паралакс ефект? Създава се 3D пространство с помощта на няколко фона, които при превъртане започват да се движат с различни скорости. Изглежда доста зрелищен и впечатляващ.

Обмислете програми и приложения, в които можете да създадете паралакс ефект:

• jQuery е плъгин, който обвързва паралакс-превъртане на потребителя на ротация на колелото на мишката.
• jParallax - може да превърне елементите на уеб страница в абсолютно позиционирани слоеве, които ще отговорят на местоположението на курсора.
• Scrolldeck е удобен plug-in, който ви позволява да постигнете този ефект.

Характеристики в уеб дизайна

Бихме искали да обърнем внимание на факта, че ефектът на паралакс не е универсално украшение за всички сайтове. Първият ресурс, на който може да се види, беше сайтът на корпорацията "Нике". И досега е доста добро за онлайн магазините, което помага да се съживи показването на асортимента, движението по категории. Но в рамките на разумни граници - потребителят все още иска да види и избере какво има нужда по-бързо, така че ефектът на насищане скоро ще започне да го дразни.

Спорно ще бъде използването му за бизнес, информационни ресурси. От една страна, паралаксът ви позволява по някакъв начин да разбиете солиден текст в блокове, а от друга страна, изглежда малко тривиално. Идеален ще бъде неговата употреба за детски, развлечения, когнитивни ресурси, биографични сайтове, ще помогне да се даде признание, оригиналност, привличане на вниманието.

Недостатъци на паралакс-превъртането и начини за тяхното премахване

Parallax е доста приятен и стилен ефект. Въпреки това, тя натоварва сериозно страницата поради използването на jаvascript / jQuery: те трябва да извършат серия от сложни изчисления, за да контролират позицията на всеки пиксел. Това значително забавя скоростта на изтегляне на сайта. Възможно е да има и проблеми със съвместимостта между различни платформи и кръстосани браузъри.

Резултатът ще бъде да не се презарежда конкретно сайта с елементи с паралакс ефект, достатъчно 1-2 на една страница. Друг начин е да използвате CSS3. Тя помага да се създаде много подобен ефект, който е по-малко ресурс интензивен. Но има недостатъци: само с помощта му не може да бъде постигнато паралелно преместване. В допълнение, CSS3 не се поддържа от всички съвременни браузъри.

Примери в уеб дизайна

За да разберете какво е ефектът на паралакс, помогнете да се запознаете с някои от неговите реализации в уеб дизайна:

• Портфолио от снимки, реагиращи на движението на мишката.
• Ефектът на превъртането - за да отворите рекламата, статията, трябва да издърпате стрелката на изображението.
• При превъртане в списъка фонът се движи по-бавно от текста.
• Някои обекти (облаци, играчки, фигурки, дрехи) се движат по страницата.
• Реагирайки на движенията си с мишката, фоновите слоеве се разминават.
• Една част от страницата на сайта е чувствителна към местоположението на курсора, а втората е неподвижна.
• Премествайки мишката, можете да пуснете ракета в космоса, кола, малък човек и т.н. Ефектът се постига с факта, че фонът се движи бавно, а основният обект - бързо.

В интерфейса на различни операционни системи също се използва такава илюзия. По-специално, за iOS 7, паралаксът вече е характерен.

По този начин целта на нашата история е релевантна в много области. Наскоро той се утвърди в уеб дизайна, който обаче не гарантира универсалния си чар за всички сайтове.