Optyczne iluzje - jedna z najbardziej ukochanych ruchów projektantów i artystów. Pomagają one zwrócić uwagę przy projektowaniu pokoju, obraz na filmie i do zawartości strony, dywersyfikacji interfejs na dowolnym urządzeniu. Dzisiaj mówimy o jednej takiej technice zwanej efekt paralaksy. Zacznijmy od definicji.
Czym jest paralaksa?
Parallax (grecki ????????. - „obowiązek”, „niczego zmieniać”) - tak zmiany w widocznej pozycji obiektu na odległym tle w zależności od położenia obserwatora.
Jest on oparty na tym zjawisku widzenia obuocznego - zdolność do jasno odróżnić jedno zdjęcie, patrząc z dwoma oczami. W astronomii i geodezji efekt paralaksy jest używany do pomiaru odległości do odległych obiektów.
Pojęcie astronomii
Istnieją różne typy bohatera naszej historii:
geocentrycznego (codziennie) - różnica w kierunkach samo astronomiczny obiekt z pewnego punktu na planecie (wektor topotsentrycheskyy) i jego centrum masa (wektor geocentryczny).
roczne - kierunki zmian na obiekcie astronomicznym związane z obrotem Słońca wokół Ziemi.
Wiek - zmiana położenia obiektów kosmicznych widocznych na niebie połączenie własnego ruchu obrotowego i ruchu układu słonecznego w galaktyce.
Na zdjęciu
Rozważmy paralaksy efekt w fotografii. Tutaj także spotyka kilkatypy:
Wizjer paralaksy - obraz, który fotograf widzi w nie lustrzanym wizjerze optycznym, nie pokrywa się z tym, co pojawia się na zdjęciu. Często objawia się to podczas fotografowania pobliskich obiektów.
Wyszukiwarka zasięgu paralaksy to kąt, pod jakim obiekt docelowy zostaje zauważony podczas celowania w ostrość za pomocą celownika optycznego).
Lornetka (stereoskopowa) paralaksy - kąt, pod którym fotografowany jest obiekt ze stereoskopowym ustawianiem zdjęć. Podobne do widzenia binokularnego.
Czasowa paralaksa - zniekształcenie efektu obiektu danych formularza, który objawia się podczas fotografowania aparatem z zasłoną. W tym momencie zauważalne jest, że coś szybko się porusza. Jeśli obiekt trzyma ścieżkę w kierunku szczeliny migawki, zostanie rozciągnięty, w przeciwnym razie - wręcz przeciwnie.
W projektowaniu stron internetowych
Tutaj efekt paralaksy (innymi słowy, przewijanie paralaksy) jest specjalną techniką, w której tło w przyszłości porusza się wolniej niż plan główny. Ostatni to tekst, obraz. Jak zrobić efekt paralaksy? Tworzy przestrzeń 3D z wieloma tłokami, które podczas przewijania zaczynają poruszać się z różnymi prędkościami. Wygląda całkiem spektakularnie i imponująco. Rozważmy programy, które mogą stworzyć efekt paralaksy:
jQuery to wtyczka powiązana z paralaksą - przewiń do obrotu myszy kółka myszy.
jParallax - potrafi konwertować elementy strony internetowej, które same pozycjonują się w warstwy, które odpowiedzą na umieszczenie kursora.
Scrolldeck jest przydatnywtyczkę, która pozwala osiągnąć taki efekt.
Cechy w projektowaniu stron internetowych
Zwróćmy uwagę na fakt, że efekt paralaksy nie jest uniwersalną ozdobą wszystkich witryn. Pierwszym zasobem, na którym można było się zastanowić, była strona Nike Corporation. I nadal jest wystarczająco dobre dla sklepów internetowych, pomagając ożywić pokaz asortymentu, ruch według kategorii. Ale w rozsądnym zakresie - użytkownik nadal chce szybko spojrzeć i wybrać to, czego potrzebuje, więc efekt nasycenia wkrótce zacznie go drażnić.
Będzie kontrowersyjnie dotyczyć jego wykorzystania w biznesie, zasobów informacyjnych. Z jednej strony, paralaksa pozwala w jakiś sposób rozbić solidny tekst na bloki, z drugiej strony wygląda trochę niepewnie. Idealne będzie jego wykorzystanie dla dzieci, rozrywki, zasobów poznawczych, stron-biografii, pomoże w rozpoznaniu, oryginalności, przyciągnie uwagę.
Wady przewijania paralaksy i sposoby ich eliminacji
Parallax - całkiem ładny i stylowy efekt. Jednak znacznie pogarsza stronę za pomocą javascript /jQuery: muszą wykonać serię złożonych obliczeń, aby monitorować położenie każdego piksela. To znacznie znacznie spowalnia prędkość pobierania witryny. Mogą również występować problemy z przeglądaniem wielu platform i przeglądaniem. Wynika z tego, że w szczególności nie uruchamia ponownie strony z elementami z efektem paralaksy, wystarczy 1-2 na jednej stronie. Innym sposobem jest użycie CSS3. Pomaga stworzyć bardzo podobny efekt, który jednocześnie jest mniej zasobochłonny. Ale ma swoje wady: tylko przy jego pomocy nie można uzyskać przewijania paralaksy. Ponadto nie wszystkie nowoczesne przeglądarki obsługują CSS3.
Przykłady w webdesignu
Rozumiemy, czym jest efekt paralaksy, widząc niektóre jego przykłady w projektowaniu stron internetowych:
Portfolio zdjęć reagujących na ruchy myszy.
Efekt przewijania - aby otworzyć reklamę, artykuł, musisz pociągnąć strzałkę na obrazku.
Podczas przewijania listy tło porusza się wolniej niż tekst.
Niektóre przedmioty (chmury, zabawki, postacie, ubrania) poruszają się po stronie.
Odpowiadając na ruchy za pomocą myszy, warstwy tła są rozproszone.
Jedna część strony jest wrażliwa na położenie kursora, a druga część jest nieruchoma.
Poruszając myszą, możesz wystrzelić rakietę w kosmos, samochód, człowieka itd. Efekt ten osiąga się dzięki temu, że tło porusza się powoli, a główny obiekt jest szybki.
Także w interfejsie różnych systemów operacyjnych stosuje się takie złudzenie. Szczególnie w przypadku iOS 7 efekt paralaksy został już scharakteryzowany. Tak więc temat naszej historii jest istotny w wielu dziedzinach. Ostatnio mocno osadził się w projektowaniu stron internetowych, co jednak nie gwarantuje jego uniwersalnego uroku dla wszystkich stron.