14 lenyűgöző parallaxis görgetéses webhely
A parallaxis görgetés egy ideje létezik, de ez egyike azoknak a webdesign-trendeknek, amelyek csak folytatódnak. A parallaxis görgetés az, amikor a webhely elrendezése látja, hogy a weboldal háttere lassabban halad az előtérbe, és görgetés közben 3D-s 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.
Az alábbiakban bemutatunk néhány olyan webhelyet, 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 az előteret, ami látszólag kissé kiugrik.
Ha nagyon kedveled kilökni a csónakot, ezek a lenyűgöző CSS animációs példák egy másik nagyszerű módszert mutatnak be arra, hogy a webhelyed álljon ki a tömegből. És megnézheti a legjobb webdesign-eszközeinket is, amelyek “segítséget nyújtanak a tervezési törekvéseiben. Most azonban vessünk egy pillantást néhány webhelyre, amelyekben a parallaxis görgetés nagyon megfelelő módon történik.
Webdesign művészettörténet
A művészet és a webdizájn története nem olyan tantárgy, amelyet szükségszerűen összeállítana, de nagyon szépek egyesült ebben a webdesign művészettörténeti oldalon, amely a művészet időbeli áttekintésével követi nyomon a webdesign jövőjét.
Itt számos parallaxis görgetési technika játszik szerepet, ami azt jelenti, hogy a felhasználók folyamatosan meglepődnek és örülnek amint végiggörgetik az oldalt. Ezt érdemes egy kis időt tölteni a felfedezéssel.
A Qode interaktív katalógus
A Qode Interaktív Katalógus stilizált alsó szöveges navigációs rendszerrel rendelkezik minden elemhez egy képet. 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 a parallaxis görgetés nem a legáttörőbb, de célját jól szolgálja. Az animáció fröccsenése szintén jó hatással van.
Csatornák
Marcus Brown által tervezett és Aristide Benoist fejlesztette ki, a Canals egy 400 éves utazásra vezet végig Amszterdam 17. századi csatornáinak történetében. A webhely szerkesztői stílusú élményt nyújt. , mint például egy dús dohányzóasztal-kötet átlapozása, és a parallaxist nagyban felhasználja, hogy felhívja a figyelmét történetének új szakaszaira, és finom mélységi hatást kölcsönöz a webhelynek.
The Goonies története
Egy bizonyos korú személy számára garantált a szeretet “80-as évek hu Kalandfilmek, The Goonies, és ha ez vagy te, akkor ez az oldal biztosan lüktetni fogja nosztalgiás mirigyeit. Joseph Berry a WebFlow segítségével készítette. A The 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.
Dogstudio
A Dogstudio webhelyének közvetlen fókuszpontja egy gyönyörű animált 3D-s kutya – vagy farkas? – az oldal közepén, amely méretez és forgat, miközben görgetsz lefelé haladva a parallaxis oldalon. Világítása megváltoztatja a színét, amikor a Dogstudio legutóbbi projektjei fölé viszi az egeret, és talán a mi kedvencünk az, amikor az oldal másolatának egy része előtt forog, és eltakarja a szöveg egy részét.
ToyFight
A 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). A parallaxis okos használata felerősíti a 3D hatást, és félkövér, világos, sima háttérrel párosítva soha nem válik elsöprővé vagy irritálóvá.
Diesel: ROSSZ útmutató
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ásának kíséretében. Az egyoldalas webhely bemutatja a “BAD Guide” alkotó szabályokat.
A felhasználó felfedezheti úgy, hogy az egeret húzza a parallaxis oldalon, amely úgy van elhelyezve, mint egy képpel ellátott kép, amelyen át lehet kattintani. A Tinderről mindenre van tanács (“Húzza jobbra, jobbra, jobbra, jobbra – rendezni fogja őket). később “) az Instagramra (” Ne felejtsd el, hogy csütörtökön vegye fel a kapcsolatot egy exrel #TBT “), monokróm illusztrációk kíséretében.
Firewatch
Az egyik A parallaxis görgetés legszebb példája a Firewatch játék weboldala, 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 szeretné megnézni, hogy ez hogyan történt, íme egy szép bemutató a CodePen-en.
GitHub 404
A GitHub 404-es oldala nem szigorúan parallaxis görgetés, mivel a hatás az egérgörgéssel történik, a görgetéssel szemben, 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 dezorientáló, túlvilági érzetet kelt.
Jess & Russ
Nem meglepő, hogy Russ Maschmeyer és Jessica Hische esküvői weboldala szépség, amit látni lehet. Az oldal felvázolja romantikus történetüket, a parallaxis görgetéssel az ábrák mélységének növelése érdekében. 2012-ben összeházasodtak, de a webhelyet még mindig érdemes megnézni.
Keresse meg pénzét
A pénzügyek és a pénz aligha a legérdekesebb a tantárgyak közül. De a New York-i székhelyű Firstborn digitális ügynökség bejárja ezt a dinamikus parallaxis görgető weboldalt. Make Your Money Matter for the Public Service Credit Union.
A nyilvánosság számára a hitelszövetkezetbe való belépés előnyeinek megtanítása céljából. A bank használata helyett ez a ragyogó webhely mindent tartalmaz, a hitelszövetkezet működésétől, a hol található és hogyan lehet alkalmazni, valamint egy számológépet, amely megmutatja, hogy a bankok mennyit profitálnak az ügyfelek betéteiből.
Madwell
A New York-i székhelyű Madwell tervező és fejlesztő ügynökség számos parallaxis görgetési effektussal mutatja be portfólióját, hogy észrevehető 3D-stílust hozzon létre, amely hatalmas nagy mélység.
New York Times: A paradicsom képes kékülni
Az alacsony figyelem és a harapásméretű média korszakában hogyan vonzza az embereket a hosszúalakú újságíráshoz? A Tomato Can Blues nagyszerű válasz erre a problémára a New York Times-tól, ötvözve néhány okos webtervezé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 “Láttuk, a cikk egy kalitka harcos történetét mutatja be, 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ó odafigyelés ragyog. Összességében nagy olvasási élmény – ez az online újságírás jövője ?
Hóesés
Az egyik első webhely valóban meghúzza a határokat, mit tehetne a hosszú formátumú online szerkesztőségi tartalommal, a New York Times Hóesés cikke számos elemet ötvöz, beleértve a parallaxis görgetést és a webes videót.
A Tunnel Creek-i lavina borzalmáról szóló cikket 2012 decemberében tették közzé az interneten, de még mindig erős példaként szolgál arra, hogy mit tehet a parallaxis görgetéssel. Az újság a Pulitzer-díjas cikket innovatív módon mutatta be, amely világszerte felkeltette a formatervező közösség figyelmét.
- 19 igazán hasznos válaszadó webdesign oktatóanyagok
- a legjobb külső merevlemezek
- Kiválóan megtervezett 404 hibaoldalak