, Żółwie w czasie lub oryginalna gra Patrol księżycowy... W tych grach technikę paralaksy obserwuje się w momencie, gdy kilka warstw tła o różnych teksturach przesuwa się od inna prędkość, który tworzy efekt trójwymiarowej przestrzeni.
Dlaczego zacząłem mówić o grach retro w artykule poświęconym tworzeniu stron internetowych? Najprostszą odpowiedzią może być „bo są fajne”, ale nie. Przewijanie paralaksy to fajna koncepcja projektowa, która wkracza do świata projektowania stron internetowych. Nike jako jedni z pierwszych zastosowali tę technikę Wielki sukces kiedy zatrudnili gigantów marketingu Weidena i Kennedy'ego do zaprojektowania ich oryginalnej strony internetowej Nike Better World. Witryna Nike Better World została od tego czasu zaktualizowana i zastąpiona nową, jednak istnieje inna witryna bardzo podobna do tego, jak wyglądał pierwszy projekt paralaksy Nike, strona z napojami sportowymi Activate.
Zapewne zauważyłeś, że podczas przewijania strony witryny kilka różnych elementów na tej stronie porusza się z różną prędkością. Weźmy jako przykład stronę pokazaną na powyższym obrazku. Podczas przewijania strony zobaczysz, że niebieskie kropki w tle (te, które są trochę rozmyte) poruszają się z taką samą prędkością, jak pasek przewijania. Zobaczysz również, że grupa niebieskich kropek, które są bardziej skupione i na pierwszym planie, poruszają się z nieco większą prędkością niż pasek przewijania. Tekst „0 CUKRU | 0 KALORII | NATURALNIE SŁODZONY ”oraz główny tytuł strony„ Produkty ”. I wreszcie zdjęcia samego produktu, zarówno małe i nieostre w tle, jak i duże, ostre i leżące na pierwszym planie. Obrazy produktów w tle poruszają się z taką samą prędkością jak tekst, podczas gdy obrazy produktów na pierwszym planie poruszają się szybciej niż tekst. To wszystko jest doskonałą demonstracją przewijania paralaksy, w którym różne warstwy obrazów nakładają się na siebie i wszystkie poruszają się z różnymi prędkościami podczas przewijania strony, tworząc trójwymiarowy efekt.
Przewijanie paralaksy nie ogranicza się do przewijania strony w pionie lub w linii prostej. Dajmy Nintendo prawo do podania doskonałego przykładu na poparcie tego twierdzenia. Pamiętajcie o wczesnych grach Nintendo, w których nasi bohaterowie zwykle poruszali się poziomo od lewej do prawej wzdłuż ekranu, a nie pionowo w dół, jak widzieliśmy na stronie Activate powyżej. Przejedź się na MarkioKart Wii i porozmawiajmy o kilku fajnych rzeczach, które możemy tam zobaczyć.
Pierwszą rzeczą, którą zauważysz, jest kierunek przewijania strony - nie jest ona pionowa, ale jak wspomniano powyżej, ale początkowo pozioma. Jasne, jest fajnie, ale to też nie jest nowy koncept. Zauważysz również efekt paralaksy z dinozaurem Yoshiego i muszlami w tle, Mario i Luigi na pierwszym planie oraz główną treścią poruszającą się z różnymi prędkościami podczas przewijania. Ale jak tylko dojdziesz do stron #highlights i #attack, ścieżka przemieszczenia nie jest już idealnie pozioma. To samo dotyczy nawigowania między stronami #odkryj i #snes. Obrazy nie tylko zachowują różną prędkość przemieszczania się, ale także zmieniają ogólny kierunek z poziomego na pionowy.
Warto również zauważyć, że wykorzystanie efektu paralaksy na swojej stronie nie powinno ograniczać się do stworzenia sztucznego efektu 3D. Witryna niemieckiego studia projektowania stron internetowych Webseitenfactory jest przykładem tego, jak paralaksę można wykorzystać do dodawania różnych efektów do strony internetowej, takich jak przesuwanie ikon wzdłuż różnych ścieżek, powiększanie i pomniejszanie podczas przewijania witryny.
Przewijanie paralaksy może również ożywić witrynę, która nie zawiera dużej ilości treści. Co się stanie, jeśli cała witryna składa się z deklaracji misji lub sekcji o nas oraz informacji kontaktowych? Najprawdopodobniej mógłbyś to zrobić na jednej stronie i pod pewnymi warunkami miałbyś dobrą witrynę jednostronicową, ale czy zostanie ona zapamiętana przez odwiedzających? Najprawdopodobniej nie. Ale co, jeśli dodasz do tego odrobinę paralaksy, tak jak robili to ludzie na wiosnę/lato?
Moje pierwsze wrażenie brzmiało: „Och, ta strona wygląda ładnie”. Ale kiedy zacząłem ją przewijać, od razu pojawiło się wrażenie „Wow, ta strona jest fajna!”. Dodanie prostego efektu paralaksy jest tym, co odróżnia dobre i niezapomniane.
Przewijanie paralaksy to fajna sztuczka, aby utrzymać się w rękawie. I zawsze można go zastosować, niezależnie od tego, czy tworzysz złożoną, wielostronicową witrynę, czy prostą jednostronicową witrynę z wizytówką.
Przykłady stron paralaksy
Niektóre z nich są bardzo fajne, polecam zapoznać się z:Esencja efekt paralaksy polega na różnych prędkościach ruchu poszczególnych elementów obrazu tła, natomiast samo tło podczas przewijania strony porusza się wolniej niż pozostałe, co stwarza wrażenie głębi i trójwymiarowości.
Ze względu na popularność efekt paralaksy, są już gotowe wtyczki z prostą implementacją paralaksa animacje na stronie. Naszym zadaniem jest efektywne wykorzystanie gotowe rozwiązania i być w stanie zastosować je w swoich witrynach.
Jak to działa efekt paralaksy, można zobaczyć na oficjalnej stronie tej wtyczki, gdzie można przewijać stronę i od razu zobaczyć taki efekt, gdy dolny blok z jednym obrazem tła unosi się do górnego.
Co jest potrzebne do wdrożenia przewijanie paralaksy efekt?
- Łączymy się z naszym HTML-biblioteka dokumentów jQuery oraz wtyczka pobrana ze strony - paralaksa.js.
- Dedukujemy efekt paralaksy do strony za pomocą atrybutu - dane... Dodaj do elementu HTML-plik, którego chcesz użyć - paralaksa danych = "przewiń" i określ ścieżkę do zdjęcia - data-image-src = "/ image.jpg" do którego chcesz zastosować efekt.
- Skopiujmy zestaw stylów i dodajmy do naszego pliku styl.css... .paralaksy-okno (
min-wysokość: 500px;
tło: przezroczyste;
} - Najważniejszą rzeczą jest odbiór duży rozmiar i zdjęcia wysokiej jakości... Jeśli nie mam zdjęć, których potrzebuję, to mogę spokojnie zabrać je z pixabay. Są bezpłatne i możesz swobodnie z nich korzystać w celach komercyjnych.
Przed wgraniem na serwer musisz mieć folder ze zdjęciami, folder z pobranymi skryptami (jquery.min.js i parallax.js), jak również HTML plik i CSS style.
Pełny Kod HTML:
Oto implementacja bardzo prostego efektu paralaksy podczas przewijania strony. Ten efekt paralaksy jest nie tylko bardzo łatwy w instalacji i konfiguracji, ale sam skrypt paralaksy jest mały i nie wymaga dodatkowe ustawienia... Ten skrypt działa, gdy podłączona jest biblioteka jQuery.
ŹRÓDŁA
Efekt paralaksy łączy się tak łatwo jak łuskanie gruszek i współpracuje z podłączoną biblioteką jQuery.
Zarchiwizowana wersja jQuery to jquery-1.11.3.min.js Ale ten efekt paralaksy działa zarówno z nowszymi wersjami biblioteki jQuery, jak i starszymi. Sprawdź to!
Dlatego łączymy się z Dokument HTML Najpierw jQuery, a potem sam skrypt parallax.min.js
Połączenie wygląda tak:
Teraz połączenie paralaksy HTML CSS
Weź blok, może to być nagłówek, sekcja, div, stopka.
Nazwij blok div w szczególności dowolną klasą i przypisz:
szerokość: 100%
min-wysokość: 400px;
Chociaż to nie jest ważne.
HTML
klasa przekroju = "paralaksa"
CSS
.parallax (min-wysokość: 400px; tło: przezroczyste;)Obowiązkowe atrybuty paralaksy
data-parallax = "scroll" - potrzebne do uruchomienia skryptu;
data-image-src = "img / bg_4.jpg - obrazek, a raczej ścieżka do obrazka;
Strona programisty stwierdza pełna lista atrybuty.
class = "parallax" - dowolna klasa, opisana powyżej.
klasa przekroju = "paralaksa"
- napis wewnątrz bloku z efektem paralaksy, w tym przypadku tytuł.To wszystko
Materiał pochodzi z zagranicy. I prezentowane wyłącznie w celach informacyjnych.
W tym artykule dowiesz się, jak: za pomocą CSS przekształcenia i shenanigans z 3d, aby uzyskać efekt paralaksy na stronie za pomocą czystego CSS.
Paralaksa jest prawie zawsze tworzona przy użyciu JavaScript i najczęściej okazuje się, że wymaga dużych zasobów, ze względu na zawieszanie słuchaczy na zdarzeniu scroll, bezpośrednie modyfikowanie DOM i powodowanie niepotrzebnych przerysowań i rearanżacji. Wszystko to dzieje się asynchronicznie ze strumieniem, w którym przeglądarka renderuje stronę, przez co przewijanie zaczyna zwalniać, a obraz rozrywa się na kawałki. Bardziej poprawne implementacje paralaksy śledzą przewijanie i wykorzystują odroczone aktualizacje DOM za pomocą requestAnimationFrame. Wynik jest jakościowo inny, ale dlaczego nie pozbyć się całkowicie JavaScript?
Przeniesienie efektu paralaksy do CSS pozwala uniknąć problemów z wydajnością i niepotrzebnych manipulacji, pozwalając przeglądarce regulować wszystko samodzielnie poprzez akcelerację sprzętową. W rezultacie prawie wszystkie procesy wymagające dużej ilości zasobów są obsługiwane bezpośrednio przez silnik przeglądarki. Szybkość klatek (FPS) pozostaje stabilna, a obraz staje się płynny. Dodatkowo możesz natychmiast połączyć paralaksę z innymi funkcjami CSS - zapytaniami o media lub obsługą. Paralaksa responsywna – jak to jest?
Teoria
Zanim zagłębimy się w zrozumienie, jak działa ten mechanizm, stwórzmy niezbędne znaczniki:
Oraz podstawowe style:
Parallax (perspektywa: 1px; wysokość: 100vh; overflow-x: ukryte; overflow-y: auto;) .parallax__layer (pozycja: bezwzględna; góra: 0; prawa: 0; dół: 0; lewa: 0;) .parallax__layer- -base (transform: translateZ (0);) .parallax__layer - wstecz (transform: translateZ (-1px);)
Cała magia dzieje się w klasie paralaksy. Zdefiniowanie właściwości stylu wysokości i perspektywy spowoduje ustawienie perspektywy elementu na jego środku, tworząc stałą rzutnię 3D. overflow-y: auto pozwoli na normalne przewijanie zawartości wewnątrz elementu, z rysowaniem potomków elementu względem ustalonej perspektywy. To jest klucz do stworzenia efektu paralaksy.
Następnie klasa parallax__layer. Jak sama nazwa wskazuje, definiuje warstwę treści, na którą zostanie zastosowany efekt paralaksy. Element z tą klasą zostaje wyrwany z ogólnego przepływu treści i ustawiony tak, aby wypełnić swój kontener.
Na koniec mamy klasy modyfikujące parallax__layer - podstawa i parallax__layer - tył. Są one potrzebne do dostosowania szybkości przewijania elementów paralaksy poprzez przesunięcie ich wzdłuż osi Z (oddalając się lub zbliżając do rzutni). W trosce o zwięzłość zrobiłem tylko dwie prędkości przewijania – dodamy jeszcze kilka później.
Korekcja głębokości
Ponieważ efekt paralaksy jest tworzony przez przekształcenia 3D, przemieszczenie elementu wzdłuż osi Z ma efekt uboczny - wymiary elementu zmieniają się w zależności od tego, czy znajduje się bliżej, czy dalej od rzutni. Aby to naprawić, musimy przeskalować () transform, aby element był renderowany w oryginalnym rozmiarze:Parallax__layer - tył (transform: translateZ (-1px) skala (2);)
Współczynnik skali można obliczyć za pomocą wzoru 1 + (translateZ * -1) / perspektywa). Na przykład, jeśli perspektywa rzutni jest ustawiona na 1px i przesuniemy element o -2px wzdłuż osi Z, to współczynnikiem będzie skala (3).
Parallax__layer - głęboka (przekształcenie: translateZ (-2px) skala (3);)
Kontrola prędkości warstwy
Szybkość warstwy jest kontrolowana przez kombinację wartości przesunięcia perspektywy i Z. Elementy z ujemnymi wartościami Z będą przewijać się wolniej niż elementy z dodatnimi wartościami Z. Im większa różnica od 0, tym wyraźniejszy efekt paralaksy.(tj. translateZ (-10px) będzie przewijać się wolniej niż translateZ (-1px)).
Tworzenie różnych odcinków efektu paralaksy
Poprzednie przykłady pokazały podstawową technikę korzystania z prostych treści, ale większość witryn paralaksy dzieli stronę na różne sekcje z różnymi efektami. Oto jak możemy to zaimplementować w naszej metodzie.Najpierw potrzebujemy elementu parallax__group, aby pogrupować nasze warstwy razem:
w tym przypadku CSS wyglądałby tak:
Parallax__group (pozycja: względna; wysokość: 100vh; styl transformacji: zachowaj-3d;)
W tym przykładzie chcę, aby każda grupa wypełniała okno, więc ustawiłem wysokość: 100vh, chociaż liczba dla każdej grupy może być inna w razie potrzeby. transform-style: preserve-3d zapobiega spłaszczaniu elementów parallax__layer przez przeglądarkę, a position: relative umożliwia pozycjonowanie elementów potomnych parallax__layer względem ich grupy.
Ważną zasadą do zapamiętania jest to, że podczas grupowania elementów nie możemy przycinać zawartości wewnątrz grupy, ponieważ przepełnienie: ukryte na elemencie parallax__group przerwie cały efekt paralaksy. Nieprzycięte treści spowodują, że dzieci wyjdą poza granice. Dlatego musisz majstrować przy indeksie Z grupy, aby upewnić się, że zawartość będzie poprawnie ukryta i pokazana, gdy użytkownik przewija witrynę.
Nie ma twardych ani szybkich reguł dotyczących pracy z warstwami, a różne metody oznaczają różne implementacje. Aby jednak ułatwić debugowanie pozycjonowania warstw, możesz zastosować prostą transformację elementów grupy:
Parallax__group (transform: translate3d (700px, 0, -800px) rotateY (30deg);)
Spójrz na poniższy przykład i zwróć uwagę na pole wyboru debugowania!
Wraz z pojawieniem się i powszechnym wykorzystaniem HTML5 (nowy standard strukturyzacji i prezentacji treści) Sieć na całym świecie) i CSS3 (ulepszona wersja języka opisu wygląd obiekty), stało się możliwe tworzenie ciekawszych i zapadających w pamięć elementów projektu dla wszystkich, bez wyjątku, stron internetowych, w tym oczywiście stron docelowych.
Parallax-scrolling (od angielskiego parallax-scrolling - w projektowaniu stron internetowych: specjalna technika stosowana głównie w Grafika komputerowa gdy obrazy tła w perspektywie poruszają się wolniej niż elementy na pierwszym planie) - to jedna z zaawansowanych technologii nowoczesne projektowanie stron internetowych... Ale nadużywanie go może pogorszyć użyteczność witryny i doprowadzić do spadku współczynników konwersji.
Dziś przygotowaliśmy dla Ciebie unikalny wybór stron paralaksy i radzimy zapoznać się z przykładami najbardziej udanych stron docelowych wykorzystujących ten efekt. Niektóre z nich wyglądają jak dzieła sztuki, inne zaskakują nietuzinkowym formatem, ale wszystkie są godne uwagi. Rzućmy okiem na paralaksę i co to jest na przykładach.
1. Płaska konstrukcja a realizm
Po której jesteś stronie?
Wraz ze zgłoszeniem takich gigantów jak Microsoft, Google i Apple (płaska konstrukcja) w mgnieniu oka stał się hitem sezonu i przedmiotem dyskusji setek kanały informacyjne i blogowanie. Był postrzegany jako swego rodzaju przełom w dziedzinie projektowania stron internetowych i najprawdopodobniej tak było. Agencja interaktywna intact postanowiła zwrócić uwagę swoich klientów na ten dość nietypowy etap w rozwoju wirtualnego designu i przygotowała interaktywną podróż z nagłówkiem „ Płaska konstrukcja przeciw realizmowi”. Wszystko to powstało oczywiście nie bez pomocy nowomodnego efektu.
Dyrektor kreatywny agencji, Alejandro Lazos, wyjaśnia, że największym wyzwaniem było połączenie gry HTML5 z przewijaniem paralaksy.
„Chcieliśmy, aby cała akcja odbywała się w sposób ciągły, aby użytkownicy mogli przejść od początku do końca bez zatrzymywania się. W tym celu wykorzystaliśmy technologię ajax, która umożliwiła przesyłanie danych przez url i aktualizację danych w tło niezwłoczne udostępnienie użytkownikowi odpowiedniej strony.”
2. Sony
Nigdy nie widziałeś czegoś takiego!
Chyba nikt na świecie nie wie, jak zaprezentować swoje produkty tak, jak robi to Sony. Prezentowany landing page jest częścią kampanii Sony „Be Moved”, o której mówią tak:
„Niejako nazywano nas królikami morskimi, ponieważ wszystkie innowacje, które wprowadzamy, są natychmiast przyjmowane przez konkurencyjne firmy. Chcieli nas skrzywdzić, ale uznaliśmy to za komplement. Współpraca artystów i inżynierów jest zawsze eksperymentem, ale tylko wtedy możesz mieć nadzieję, że jutro zrobisz krok naprzód.
3. Kawa z Costa
Graphite Digital wybrał ilustracje, które najbardziej wyraziście przedstawiają produkty firmy
Ta imponująca jednostronicowa strona jest pomysłem agencji Graphite Digital z Brighton. W niedalekiej przeszłości agencja miała za zadanie zaprezentować produkt Costa Coffee w jasny i ciekawy sposób.
Wynik pracy zasługuje na wszelkie pochwały. Strona docelowa wygląda wspaniale. Jest wypełniony różnego rodzaju interaktywnymi elementami i animowanymi ilustracjami.
4. Autostrada pierwsza
Duża waga obrazu okazała się dużym problemem dla programistów
Ta niesamowita mikrowitryna, zaprojektowana przez agencję Shout Digital z Newcastle dla biura podróży Exsus, firmy zajmującej się luksusowymi wakacjami i podróżami poślubnymi, jest kolejnym świetnym przykładem tego tematu. Ich animacja w stylu retro natychmiast przyciąga twoją uwagę i nigdy nie odpuszcza, aż do napisów końcowych.
Jedź klasycznym Cadillac Eldorado z 1959 r., aby odwiedzić wszystkie słynne wybrzeża Kalifornii. Na pierwszy rzut oka wszystkie efekty wydają się proste, ale gdy tylko zaczniesz przewijać, prawdziwa magia otworzy się przed Tobą.
5. Spraw, aby Twoje pieniądze miały znaczenie
Zarządzaj swoimi finansami tak, jak radzi Make Your Money Matter
Wiele osób interesuje się tematem pieniędzy i finansów osobistych, dlatego nowojorska agencja cyfrowa Firstborn przygotowując zamówienie do kasy, preferowała innowacyjny format od tradycyjnego.
W celu podniesienia świadomości docelowych odbiorców na temat zalet unii kredytowych (i wad banków) marketerzy stworzyli niesamowitą stronę docelową, która w przystępny i interesujący sposób wyjaśnia, jak działa unia kredytowa, gdzie znaleźć biura organizacji i wiele więcej. Dodatkowo istnieje kalkulator, który obliczy zysk, jaki banki otrzymają z Twoich inwestycji.
6. Cyklomon
Strona docelowa pokaże Ci wszystko istniejące gatunki rowery
Chińscy mędrcy mówią: „Jesteś tym, co jesz”. Dla projektantów i entuzjastów rowerów, Romaina Bourdieux i Thomasa Pomarelle, ta słynna mądrość brzmi: „Jesteś tym, czym jeździsz”. Ich współautorska strona internetowa zaskoczy Cię nie tylko nowatorskim przewijaniem, ale także świetnym poczuciem humoru i pierwszorzędnymi ilustracjami.
Wygląda na to, że twórcy nie przegapili ani jednego typu roweru i starali się je zaprezentować w taki sposób, aby każdy odwiedzający był chętny do zakupu i dołączenia do wielomilionowej subkultury.
7. Lexus
Samochód możesz wypróbować pozostając w domu w wygodnym fotelu
Dzięki tej stronie możesz spróbować nowy model z oferty Lexusa bez wychodzenia z domu. Interaktywne wideo opracowane przez agencję doradztwa cyfrowego Amaze dostarczy pełnych i wysoce wizualnych informacji na temat wnętrza i nadwozia samochodu Lexus IS. Efekt obecności jest zapewniony.
Aby osiągnąć ten wynik, zespół marketingowy musiał uchwycić samochód na tle różnych krajobrazów i zeskanować widok otoczenia w każdym z Kluczowe punkty... Dzięki technologii HTML5 strona docelowa działa zarówno na komputerach, jak i smartfonach, dzięki czemu promocja samochodów jest skuteczniejsza niż kiedykolwiek.
Wendy Stonefield, dyrektor handlowy firmy Amaze, zauważa: „Korzystanie z HTML5 pozwoliło nam osiągnąć kilka celów. Po pierwsze, jest to wizualna demonstracja samochodu i jego cech funkcjonalnych. Po drugie to interaktywność, bez której żaden nowoczesny projekt nie może się obejść: w tym przypadku umożliwiamy użytkownikom wybór koloru wnętrza i karoserii samochodu. Tworząc filmy, skupiliśmy się na wyrafinowanym widzu - a dzięki obecnym technologiom stało się to więcej niż możliwe. Pokazaliśmy Lexusa IS takim, jakim jest naprawdę.”
8. Życie w moich butach
Life in my Shoes (z angielskiego – oczami innej osoby) to ambitny projekt, którego głównym zadaniem jest wykorzenienie strachu i uprzedzeń wobec osób zakażonych wirusem HIV oraz podniesienie świadomości młodszego pokolenia na temat HIV i AIDS. Londyńska agencja Traffic miała za zadanie zaprojektować stronę docelową, która przyciągnie uwagę młodych odbiorców i zdobędzie ich zaufanie, i wykonała z tym świetną robotę.
Zaimplementowano czcionkę korporacyjną Houshka Rounded Medium z obsługą składni font-face, dzięki czemu strona wygląda na żywszą i ciekawszą. Inne elementy dekoracyjne wraz z zastosowaniem koloru żółtego sprawiły, że zasób był estetyczny.
9. Bestia
Nowa strona docelowa słynnego piosenkarza ludowego recytuje poezję i towarzyszy jej niesamowitymi obrazami
Aby promować nowy album Laury Marling A Creature I Don „t Know”, londyńska agencja cyfrowa Studio Juice opracowała niesamowitą stronę docelową, która zawiera poezję w towarzystwie znakomitych ilustracji i ekspresyjnych animacji.
Do stworzenia takiego cudu wykorzystano nowe elementy semantyczne i atrybuty, dzięki którym animacje są zsynchronizowane ze ścieżką dźwiękową, a ich szybkość odpowiada wcześniej określonym parametrom.
10. Laboratorium
Alzheimer's Research, wiodąca brytyjska instytucja zajmująca się badaniem choroby Alzheimera, jest zaangażowana w komunikowanie swoich prac i wyników w angażujący i przystępny sposób. W tym celu stworzono zasób The Lab.
Na stronie każdy użytkownik otrzymuje możliwość zapoznania się z laboratoriami i kliniką instytucji, a wyskakujące wskazówki w zwięzłej formie wyjaśniają, co jest wyświetlane na ekranie. Jeśli klikniesz na którykolwiek z nich, otrzymasz bardziej szczegółowe informacje. Pokaz, w jaki sposób naukowcy ożywiają swoje teorie i dają nadzieję milionom ludzi, jest w najlepszym wydaniu.
11. Dlaczego twój mózg łaknie infografik
Infografiki o infografikach!
W NeoMam Studios pojawił się doskonały landing page z przewijanym paralaksą, podkreślający główne zalety infografiki jako metody prezentacji informacji.
„Przewijanie paralaksowe to najtrudniejsza rzecz, jaką muszą wdrożyć nasi programiści”, mówi Danny Ashton, dyrektor firmy. „Uznali, że wszystkie dostępne biblioteki są trywialne, więc zamiast tego stworzyli własne”.
12.5 megauche
Główną cechą tego zasobu jest to, że każda z jego stron jest wyposażona we własny mechanizm przewijania. Wszyscy! To bardzo zabawne i bardzo udane podejście, które jednocześnie udowadnia, że ta technologia pozwala wymyślać pomysłowe formy prezentacji informacji.
13. Światowe Targi Atlantydy
Niezwykłe przewijanie tutaj działa nie tyle dla rozrywki, co dla fabuły.
Ta internetowa infografika została opracowana przez Franka Chimero, który wykorzystał przewijanie paralaksy nie tylko do bardziej efektywnego prezentowania informacji, ale także do ich animacji i dopasowania do konkretnej fabuły. Ewolucje!
14. Każda ostatnia kropla
Poznaj globalny problem braku czystej wody!
Studio animacji Nice & Serious zaprojektowało tę stronę docelową, aby podnieść świadomość społeczną na temat problemu niedoboru czystej wody na naszej planecie. Gdzie spędzamy wodę? Gdzie możemy to zapisać? Jak to zrobić? Dowiesz się wszystkiego o tym problemie. Każda ostatnia kropla.
15. Żywe słowo
Agencja cyfrowa Tribal miała za zadanie zaktualizować reprezentację online biura tłumaczeń Living Word i uczynić ją informacyjną i interesującą. Możesz sam podziwiać wynik, ale powiedzmy od razu, że Brytyjczycy nie wymyślili niczego niezwykłego, ale zrobili wszystko porządnie i czysto.
16. Madwell
Przewijanie paralaksy dodaje głębi do strony docelowej Madwell
Nowojorska agencja rozwoju biznesu Madwell wykorzystuje landing page do prezentacji swojego portfolio. Przewijanie paralaksy to swego rodzaju radość z akcji, którą organizują: uzyskany efekt 3D dodaje głębi ich tworzeniu.
17. Spacer po śródmieściu Jacksonville
Jacksonville Downtown Art Walk to tradycyjna comiesięczna impreza artystyczna i kulturalna w Jacksonville na Florydzie. Festiwal rozciąga się na 15 blokach i składa się z kilkudziesięciu galerii, muzeów i barów. Wszystkim tym towarzyszą uliczni aktorzy i muzycy. Piękna strona internetowa o tym wydarzeniu może wnieść radosny nastrój do Twojego domu.
18. Od holenderskiego
Marka modowa Von Dutch opowiada niesamowitą historię życia swojego założyciela na łamach swojej witryny internetowej. Niewątpliwie, aby być w trendzie, w witrynie zastosowano nowy rodzaj przewijania. Podczas przewijania strony obrazy i ikony unoszą się w górę iw dół, sprawiając wrażenie, że ktoś wlał wodę do monitora podczas Twojej nieobecności.
19. Fannabee
Fanabee to landing page stworzony nie tyle dla tych, którzy lubią muzykę, co raczej dla tych, którzy ją kolekcjonują. Dzięki tej usłudze możesz opublikować listę tego, co zebrałeś (płyty CD, plakaty, koszulki itp.) i znaleźć to, czego Ci brakuje.
20. Peugeot Hybrydowy4
Nowe technologie trzeba prezentować w nowy sposób, prawda?
Komiks internetowy, zamówiony przez giganta motoryzacyjnego Peugeot (Peugeot), pozwala firmie na jednoczesne wykonanie dwóch zadań: po pierwsze, dość skutecznie prezentuje nowy mechanizm Peugeota Hybrid4 uwadze docelowej grupy odbiorców, a po drugie, pracuje nad wizerunkiem zarówno produktu, jak i samej firmy: dołączenie do Peugeota, który odważnie eksperymentuje z formatami i nie zapomina o swojej indywidualności, stanie się teraz jeszcze bardziej prestiżowe.
21. Rozwiązania kulturowe
Cultural Solutions to agencja konsultingowa, która, jak sama nazwa wskazuje, zajmuje się problematyką sztuki. Logo firmy składa się z wielokolorowych kół nałożonych na siebie. Dlatego dalej strona główna miejscu, te kręgi są odtwarzane przy użyciu efektu paralaksy. Kręgi poruszają się z różnymi prędkościami, co dodaje głębi i objętości. Rezultatem jest lakoniczne, ale bardzo pojemne i stylowe zestawienie.
22. Konferencja jQuery
Twórcy serwisu jQuery Conference nie zapominają o najważniejszym: zachowują odpowiednią równowagę między treścią informacyjną a efektownością.
Strona, stworzona specjalnie na konferencję jQuery, jest wykonana z fikcją. Podczas przewijania strony przewijanie paralaksy w jquery uruchamia szereg różnych animacji: rower poruszający się od lewej do prawej lub stado mew goniących rekina. Ogólnie jest oryginalny i nie przeładowany efektami: w końcu najważniejsze jest nie tylko zaskoczenie, ale także bycie usłyszanym.
23. Kształt
Agencja kreatywna Shape na swoim landing page w dość lakonicznej formie opowiada o głównych etapach swojej działalności. Ładne wizualizacje i animacje dodają przejrzystości.
24. Nintendo
Aby przybliżyć docelowej publiczności nową serię gier Mario Kart, znana japońska firma opracowała stronę docelową, która opowiada o grze w formie krótkiej podróży po jej świecie. Projekt strony docelowej i jej kolorystyka naśladują styl gry, a po drodze spotkasz postacie znane z dzieciństwa.
25. Aktywuj napoje
Wystarczy odkręcić pokrywkę i rozpocznie się akcja
Firma Activate Drinks zajmuje się dystrybucją napojów wzbogacanych, a aby promować swoje produkty, opracowała zasoby, które są istotne pod każdym względem. Najpierw odkręcasz nakrętkę butelki (oczywiście przewijając stronę), a potem znajdujesz się w wirze szybkich bąbelków. Trzy poziomy rozmieszczenia bąbelków tworzą efekt 3D i wrażenie plusku na monitorze.
26. Oś czasu Białego Domu w Iraku
Niezwykłe przewijanie służy nie tylko wzmocnieniu estetycznej strony kampanii, ale, w przypadku rządu USA, dodaniu treści i emocji na stronie. Możesz zauważyć, że cała zawartość przewija się znacznie szybciej niż znajdujące się pod nią obrazy. Robi się to celowo, aby skupić uwagę czytelnika właśnie na tych ilustracjach, które mają wpływ na emocje zwiedzających.
27. Historie okładek z widłami
Renomowana strona muzyczna Pitchfork zrobiła wielki rozgłos dzięki ambitnemu projektowi Cover Stories. Zasoby internetowe zyskały niektóre cechy drukowanego, błyszczącego magazynu, ale zastosowanie efektu paralaksy na stronie, interaktywne filmy, wywiady i unikalne zdjęcia sprawiły, że była inna niż wszystko inne. Animowane zdjęcia portretowe, uduchowiony tekst i idealnie dobrana ścieżka dźwiękowa - bardzo wymowna i wykwintna.
28. Soleil Noir 2012 | Wierzymy w ...
Urzekający minimalizm od Francuzów z Soleil Noir
Ta dziwaczna strona docelowa zaprojektowana przez Francuzów z Soleil Noir jest zasadniczo karta noworoczna... Nie znajdziecie tu nic skomplikowanego: oszałamiające przewijanie paralaksy, minimalizm w ilustracjach, lakoniczne frazy – ale ta prostota urzeka.
29. Oakley
Oakley łączy oszałamiające przewijanie paralaksy z ekspresyjną fotografią
Oakley to renomowany dostawca gogli i gogli, a ten zasób został opracowany specjalnie w celu promowania nowego modelu gogli Airbrake MX. Landing page łączy w sobie oszałamiające przewijanie paralaksy i wyraziste zdjęcia, które doskonale prezentują produkt.
30. Jason Kenny OBE
Strona docelowa Jasona Kenny'ego, trzykrotnego mistrza olimpijskiego i dwukrotnego mistrza świata w kolarstwie
Na początku tego roku agencja marketingowa z Bristolu Fiasco Design zaprojektowała to wspaniałe wstęp dla trzykrotnego olimpijskiego i dwukrotnego mistrza świata w kolarstwie Jasona Kenny'ego. Współzałożyciel agencji, Ben Steers, stwierdza: „Building on zadanie techniczne, postanowiliśmy stworzyć witrynę jednostronicową z przewijaniem w pionie i paralaksą”.
31. La Moulade
Pasek nawigacyjny pozwoli Ci szybko i łatwo przejść do żądanego obszaru strony
Wśród rosnącej liczby stron docelowych, które wykorzystują położenie paska przewijania do uruchamiania animacji i efektów dźwiękowych, francuska agencja La Moulade wyróżnia się bardzo nietypowym wskaźnikiem Twojej pozycji na stronie. Jest umieszczony na górze i zapewnia również dostęp do dowolnej części witryny.
32. Żywe trupy
Najtrudniej jest połączyć ze sobą osiągnięcia wszystkich technologii.
„Przede wszystkim sami jesteśmy fanami tego programu” – główny projektant Gavin Beck dzieli się swoimi wrażeniami z projektu. „Naszym planem było stworzenie strony internetowej, która pasowałaby do świata The Walking Dead, którą fani serii docenią i zbadają. Aby osiągnąć nasze cele, wykorzystaliśmy nowe rozwiązania, takie jak HTML5, CSS3, JavaScript/jQuery, Web Audio/HTML5 Audio i oczywiście przewijanie paralaksy. Największym wyzwaniem było sprawienie, by wszystkie te technologie współpracowały ze sobą i były dostępne na wszystkich rodzajach platform”.
33. New York Times: Blues w puszce z pomidorami
Czy to może być przyszłość dziennikarstwa internetowego?
W czasach, gdy ludzie nie obciążają się czytaniem gazet i czasopism, wielu dziennikarzy zastanawia się, jak zwrócić uwagę odbiorców na słowo drukowane. Jedną z opcji wyjścia z kryzysu zaproponowała amerykańska gazeta Nowa The York Times, który opracował nową formę prezentacji artykułów i historii z czasopism – jednostronicową witrynę zbudowaną z wykorzystaniem najnowszych osiągnięć w projektowaniu stron internetowych i zilustrowaną przez Atilla Futaki.
Gdy tylko zaczniesz przewijać stronę, ilustracje poruszą się i zanurzą Cię w opisywanej akcji.
34. Wypłaty za usługi zdrowotne
Wydaje się, że nic skomplikowanego, ale wygląda całkiem zabawnie
Niezależnie od tego, czy placówka opieki zdrowotnej jest publiczna czy prywatna, liderzy tych organizacji coraz bardziej niepokoją się rosnącą wielkością wypłat odszkodowań. Przedstawione infografiki ujawniają dokładnie ten problem, ale zwracają na siebie uwagę paralaksą.
Gdy tylko zaczniesz przewijać stronę docelową, na ekranie pojawi się pracownik służby zdrowia, idący korytarzem i pchający przed sobą nosze. Przechodzi od sekcji do sekcji, z których każda reprezentuje określony rok w historii brytyjskiego krajowego systemu opieki zdrowotnej. Wyskakujące okienka dostarczają informacji o maksymalnych wypłatach rekompensaty w tych latach. Wydaje się, że to nic skomplikowanego, ale wygląda całkiem zabawnie.
Pracownik agencji, która opracowała ten landing page, dzieli się swoimi wrażeniami z pracy: „Do stworzenia tej strony zastosowaliśmy nowe technologie w HTML5, CSS3 i JavaScript. Ponieważ animacje są kluczowy element, używaliśmy głównie bibliotek animacji „skrollr”. Każdy element pomalowaliśmy ręcznie i dodaliśmy ostatnie szlify dzięki obsłudze CSS3.”
35. Rozwijamy się
Idealna gra z różnymi rodzajami przewijania
Ten zasób został stworzony przez norweską agencję Unfold i jest przykładem połączenia efektów, takich jak przewijanie bez końca i przewijanie paralaksy. Pasek nawigacyjny ukryty po prawej stronie górny róg, zawsze poinformuje Cię, gdzie jesteś na stronie i pozwoli szybko przejść do interesującego Cię obszaru, a jeśli przewiniesz do końca strony, zauważysz, że pasek przewijania automatycznie się przesunie w górę i będziesz kontynuować przewijanie witryny od samego początku.
36. Wyzwanie oszczędności
Do stworzenia tej strony docelowej programiści wykorzystali wtyczkę skrollr.js, dzięki której odwiedzający mogli „przewijać” zdarzenia na stronie. Pozwala to na dużą szybkość symulacji, dając więcej czasu na płynne przejścia i efektywne budowanie build interfejs użytkownika... Do tworzenia animacji wykorzystano technologię CSS 3D.
Wtyczka Stellar.js
Stellar.js to wtyczka, dzięki której możesz zastosować efekt paralaksy do dowolnego przewijalnego obiektu. Chociaż ta wtyczka nie jest już obsługiwana, jest używana przez wielu programistów ze względu na jej stabilność i kompatybilność z najnowsze wersje jQuery.
Kolejną przydatną funkcją jest możliwość pracy bez biblioteki jQuery. Dlatego stworzone na jego podstawie landing page ważą mniej i szybciej się ładują.
Wniosek
Świat nie stoi w miejscu i każdego dnia pojawiają się nowe dzieła sztuki z dziedziny projektowania stron internetowych. Czy będziesz wśród tych bohaterów? To proste, jeśli zastosujesz te doskonałe technologie. Ale nie zapomnij o najważniejszym: każdy osadzony efekt powinien zwiększyć konwersję! W przeciwnym razie po prostu go nie potrzebujesz.
Platforma LPgenerator, a dokładniej nasza edytor wizualny wspiera efekty paralaksy; przekonaj się sam z szablonami na landing pages w LP Store
