14 lenyűgöző parallaxis görgető webhely

parallaxis görgetés: webdesign és művészettörténet
(Kép jóváírása: Webdesign és művészettörténet)

A parallaxis görgetés már egy ideje létezik, de ez egyike azoknak a webdesign-trendeknek, amelyek csak tovább tartanak. A parallaxis görgetés az, amikor a weboldal elrendezése látja, hogy a weboldal háttere lassabban halad az előtérbe, és görgetés közben 3D hatást hoz létre. Kíméletesen használva szép, finom mélységelemet nyújthat, amelynek eredményeként egy jellegzetes és emlékezetes weboldal jön létre.

Annak bemutatásához, hogy mit kell csinálni, íme néhány webhely, amelyek ragyogó hatást gyakorolnak a technikára. Bizonyos esetekben a parallaxis görgetés a műsor sztárja; másokban egyszerűen egy kis mélységgel egészíti ki azt, hogy az előtér látszólag kissé kiugrik.

Ha kedveled igazán kilökni a hajót, ezek lenyűgözőek CSS animáció a példák egy másik nagyszerű módszert mutatnak be, hogy webhelye kiemelkedjen a tömegből. És a legjobbakat is megnézheti webdesign eszközök ez segít a tervezési törekvéseiben. Most azonban nézzünk meg néhány olyan webhelyet, ahol a parallaxis görgetés nagyon helyes módon történik.



01. Web design művészettörténet

parallaxis görgetés: webdesign és művészettörténet

Ismerje meg a művészettörténetet a parallaxis görgetési effektusok segítségével(Kép jóváírása: Webdesign és művészettörténet)

A művészettörténet és a webdesign nem szükségszerűen összeállítandó témák, de ebben gyönyörűen egyesülnek web design művészettörténet webhely, amely a művészet idővel történő megtekintésével követi nyomon a webdesign jövőjét.

A parallaxis görgetési technikák széles skálája van itt, ami azt jelenti, hogy a felhasználók folyamatosan meglepődnek és örülnek, amikor végiggörgetik az oldalt. Ezt érdemes egy kis időt tölteni a felfedezéssel.

02. A Qode Interaktív Katalógus

parallaxis görgetés

Görgessen tovább az itt kínált WordPress-témák felfedezéséhez(Kép jóváírása: The Qode Interactive Catalogue)

A Qode Interaktív Katalógus rendelkezik stilizált alsó szöveges navigációs rendszerrel, amely minden elemhez képet mutat. A katalógusra kattintva vízszintes parallaxis görgetés jelenik meg, amelyet egy sor WordPress-téma bemutatására használnak. Ebben a listában nem a parallaxis görgetés legáttörőbb alkalmazása, de célját jól szolgálja. Az animáció fröccsenése szintén jó hatással van.

03. Csatornák

Parallaxis görgetés: csatornák

A csatornák olyanok, mint a nagy dohányzóasztal-könyv lapozgatása(Kép jóváírása: Canals)

Marcus Brown tervezte és Aristide Benoist fejlesztette ki Csatornák 400 éves utazáson veszi át az amszterdami 17. századi csatornák történelmét. A webhely szerkesztői stílusú élményt nyújt, mint például a dús dohányzóasztal-kötet átlapozása, és a parallaxist nagyszerűen felhasználja, hogy felhívja a figyelmét történetének új szakaszaira, és hogy a webhely finom mélységi hatást nyújtson.

04. The Goonies története

Parallaxis görgetés: The Goonies története

Szerezz be egy édes 80-as évekbeli retro slágert(Kép jóváírása: The Goonies története)

Bárkinek egy bizonyos korban garantált a 80-as évekbeli szerelmi kalandfilm, a The Goonies, és ha te vagy az, akkor ez az oldal biztosan lüktető nosztalgiamirigyeket fog kelteni. Készítette: Joseph Berry a WebFlow segítségével, A Goonies története tisztelgés egy retro klasszikus előtt, amely parallaxis görgetéssel vonzza be a történetet, bemutatja a karaktereket és felfedi a film módját.

05. Kutya stúdió

Parallaxis görgetés: DogStudio

Az animált 3D doggo a bemutató sztárja itt [Kép: Dogstudio]

Azonnali fokális vonzereje Dogstudio egy gyönyörű animált 3D kutya - vagy farkas? - az oldal közepén ez skálázódik és forog, miközben a parallaxis oldalon lefelé görget. Világítása megváltoztatja a színét, amikor a Dogstudio legutóbbi projektjei fölé viszi az egeret, és talán az a kedvenc kedvencünk, amikor az oldal másolatának egy része előtt forog, és eltakarja a szöveg egy részét.

06. ToyFight

Parallaxis görgetés: ToyFight

Jonny és Leigh egyaránt anatómiailag helyesek [Kép: ToyFight]

ToyFight egy díjnyertes kreatív ügynökség, és a weboldala nagyon szórakoztató. Az alapítók, Jonny Lander és Leigh Whipday 3D-s figurákká változtatták magukat, amelyek az egész oldalon számos jelenetben jelennek meg (beleértve ezt a pimasz Sagmeister & Walsh referenciát is). A parallaxis okos használata felerősíti a 3D hatást, és merész, fényes, sima háttérrel párosítva soha nem válik elsöprővé vagy irritálóvá.

07. Dízel: ROSSZ útmutató

parallaxis görgetés: Diesel

A Diesel BAD útmutatója úgy működik, mint egy virtuális tábla [Kép: Diesel]

84.Párizs létrehozta ezt a lenyűgöző parallaxis weboldalt (és a hozzá kapcsolódó közösségi média kampányt) a Diesel BAD illatának piacra dobása kíséretében. Az egyoldalas webhely bemutatja a „BAD Guide” részét képező szabályok sorát.

A felhasználó felfedezheti úgy, hogy az egeret körbehúzza a parallaxis oldalon, amely úgy van elrendezve, mint egy képpel ellátott kép, amelyen át lehet kattintani. Mindenről van tanács a Tinder-től ('Húzza jobbra, jobbra, jobbra, jobbra - később rendezni fogja őket') az Instagram-ig ('Ne felejtsen el kapcsolatba lépni egy volt csütörtökön #TBT'), fekete-fehér illusztrációk.

08. Tűzoltó

A Firewatch webhelyének képernyőképe egy túrázó szemléltetését mutatja hajnalban egy arany kanyon fölött

Minden faréteg önállóan mozog [Kép: Campo Santo]

A parallaxis görgetés egyik legszebb példája, amelyet láttunk, ez a játék weboldala Tűzoltó , amely hat mozgó réteget használ a mélység érzetének létrehozásához. Nagyszerű, mert nincs tekercseltérítés (ami gyakran kíséri a parallaxis hatást), és csak az oldal tetején található - a webhely többi része továbbra is így van, így elolvashatja az információkat anélkül, hogy tengeri betegséget okozna. Ha meg akarja nézni, hogyan történik, íme egy szép bemutató CodePen .

09. GitHub 404

Parallaxis görgetés: a GitHub képernyőképe

A GitHub 404-esje eltéríti a parallaxis szabályait a dezorientáló hatás érdekében [Kép: GitHub]

A GitHub 404. oldala nem szigorúan parallaxis görgetés, mivel az effektus az egérrel való görgetéssel történik, szemben a görgetéssel, de ez egy nagyon szórakoztató oldal, amely réteget használ a mélység növeléséhez. A „megfelelő” parallaxissal ellentétben a háttér gyorsabban mozog, mint az előtér, és zavaró, túlvilági érzetet kelt.

10. Jess & Russ

Parallaxis görgetés: a képernyőképen egy fehér ruhás nő illusztrációja látható, amelyet éjszaka gyorsan cipel a városra.

Minden illusztráció érzékeli a mélységet [Kép: Jess & Russ]

Nem meglepő, hogy Russ Maschmeyer és Jessica Hische design hatalmi párja esküvői honlap szépség, amit látni kell. A helyszín felvázolja romantikus történetüket, a parallaxis görgetéssel végig használják az illusztrációk mélységének növelését. 2012-ben összeházasodtak, de a weboldal még mindig megéri megnézni.

11. Keresse meg pénzét

Példa a parallaxis görgetésű webhelyekre: Keressen pénzt

Kezelje pénzügyeit a Make Your Money Matter információival és tanácsaival [Kép: Közszolgálati hitelszövetkezet]

A pénzügy és a pénz aligha a legérdekesebb tárgy. De New York-i székhelyű digitális ügynökség Elsőszülött be van lépve ezzel a dinamikus parallaxis görgető weboldallal Keressen pénzt a Közszolgálati Hitelszövetkezet számára.

Annak a célnak a megismerése érdekében, hogy a közvélemény megtanítsa a hitelszövetkezetbe való belépés előnyeit, ahelyett, hogy bankot használna, ez a ragyogó webhely mindent tartalmaz, a hitelszövetkezet működésétől, a hol található és hogyan lehet jelentkezni, valamint egy számológépet, amely csak hogy a bankok mennyit profitálnak az ügyfelek betéteiből.

12. Madwell

parallaxis görgetés: Madwell

A New York-i Madwell ügynökség a parallaxis görgetéssel növeli a mélység érzetét [Kép: Madwell]

Tervező és fejlesztő ügynökség Madwell , New York-i székhelyű, számos parallaxis görgetési effektussal mutatja be portfólióját, hogy észrevehető 3D-stílust hozzon létre, amely hatalmas mélységet kölcsönöz.

13. New York Times: Tomato Can Blues

Példák a parallaxis görgetésű webhelyekre: New York Times

Gyönyörű tapasztalat tapasztalható ezzel a parallaxis görgetéssel a New York Times cikkével [Kép:]

Az alacsony figyelemfelhívások és a harapásméretű média mai korszakában hogyan vonzza az embereket a hosszúalakú újságíráshoz? Paradicsom Kék nagyszerű válasz a New York Times problémájára, ötvözve néhány okos web-tervezési technikát Atilla Futaki által készített mesemondással és képregény ihlette illusztrációkkal.

A parallaxis görgetés egyik legjobb példája, amelyet láttunk, a cikk végigvezeti Önt egy ketrecharcos történetén, amelyet Mary Pilon írt. A tartalom görgetése közben az illusztrációk okos animációkkal és átalakításokkal elevenednek meg, lehetővé téve, hogy teljes mértékben elmerülhessen a tartalomban.

A Futaki illusztrációi rendőrségi nyilvántartásokon, tanúk beszámolóin, fényképeken és a riporter feljegyzésein alapultak, és a részletekre való figyelem átsüt. Összességében remek olvasási élmény - ez az online újságírás jövője?

14. Hóesés

Példa parallaxis görgetésű webhelyekre: Hóesés

A New York Times „Hóesés” cikke teljesen új őrületet indított a gazdag parallaxis oldalak számára [Kép: New York Times]

Az egyik első webhely, amely valóban meghúzza a határokat annak, hogy mit tehet a hosszú formájú online szerkesztőségi tartalommal, a New York Times Hó esik A cikk számos elemet ötvöz, beleértve a parallaxis görgetést és a webes videót.

A Tunnel Creek-i lavina rémületéről szóló cikket 2012 decemberében tették közzé az interneten, de továbbra is erős példaként szolgál arra, hogy mit tehet a parallaxis görgetéssel. Az újság innovatív módon mutatta be a Pulitzer-díjas cikket, amely világszerte felkeltette a tervező közösség figyelmét.

Kapcsolódó cikkek: