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

Какво е паралакс?

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


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

Понятието астрономия

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

Геоцентрична (дневна) - разликата на посоките на един и същ астрономически обект от определена точка на повърхността на нашата планета (топоцентричен вектор) и от центъра на него маса (геоцентричен вектор).

Годишни - промени в посоката на астрономическия обект, свързани с въртенето около Слънцето в нашата Земя.

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

На снимката

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

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

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

Бинокъл (стереоскопичен) паралакс - ъгълът, под който обектът се снима със стереоскопична настройка на снимката. Подобно на бинокулярното зрение.

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

В уеб дизайна

Тук ефектът на паралакс (с други думи, паралакс-превъртане) е специална техника, при която фонът в бъдеще се движи по-бавно от основния план. Последният е текст, изображение. Как да направим паралакс ефект? Създава 3D пространство с множество фонове, които при превъртане започват да се движат с различни скорости. Изглежда доста зрелищно и впечатляващо. Нека разгледаме програми, които могат да създадат ефекта на паралакс:

jQuery е плъгин, който свързва паралакс-превъртане до завъртането на колелото на мишката.

jParallax - може да конвертира елементи на уеб страница, които се позиционират изцяло на слоеве, които ще реагират на разположението на курсора.

Scrolldeck е удобенplug-in, който ви позволява да постигнете такъв ефект.

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

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

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

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

Примери в webdesign

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

Портфолио от снимки, които отговарят на движенията на мишката.

Ефект на превъртане - за да отворите реклама, статия, трябва да дръпнете стрелката в изображението.

Когато превъртате списъка, фонът се движи по-бавно от текста.

Някои предмети (облаци, играчки, фигури, дрехи) се движат по страницата.

В отговор на вашите движения с мишката, фоновите слоеве са разпръснати.

Една част от страницата на сайта е чувствителна към местоположението на курсора, а втората част е неподвижна.

Като премествате мишката, можете да пуснете ракета в космоса, кола, човек и т.н. Ефектът се постига от факта, че фонът се движи бавно и основният обект е бърз.

В интерфейса на различни операционни системи също се прилага такава илюзия. Особено за iOS 7, ефектът на паралакса вече е характеризиран. По този начин темата на нашата история е актуална в много области. Напоследък той твърдо се е установил в уеб дизайна, който обаче не гарантира неговите универсални чар за всички сайтове.