Mozgás közben a parallaxis az objektum helyzetének változását jelenti valamilyen háttér előtt a helyben lévő megfigyelőhöz képest. Ez a kifejezés népszerűvé vált az interneten. Különösen érdekesnek tűnik a webhely, amelynek kialakításában dinamikus elemek találhatók. A Parallax egy weblaptervezési technika, amelyet a webmesterek használnak nagyszámú látogató vonzására.
Mi az a parallaxis
A parallaxis görgetés függőlegesen és egyenes vonalban is használható. A Nintendo a legjobb példa. Sokan nosztalgiával emlékezünk a számítógépes játékokra, amelyeket a főszereplők mozgása jelképez a képernyő bal oldaláról jobbra. Lefelé mozgás is lehetséges, függőlegesen elhelyezkedő egyenes vonal mentén. Gyakran használják a parallaxis hatást a weben. JavaScript vagy CSS segítségével hozhat létre függőleges csúszkát 3.
A leírt háromdimenziós térhatás éppen rájuk jellemző. A játékok készítői több háttérréteget használtak. Ezek textúrájában különböznek, míg a mozgást különböző módon hajtják végresebesség.
Ne gondolja, hogy a parallaxis csak egy 3D hatás. Az oldalon áthelyezheti a meglévő ikonokat. Ráadásul nagyon vonzónak tűnik. Különösen jó lehetőség, ha mindegyikhez egyéni pályát használunk. Ebben az esetben különböző ikonokat használnak, amelyek különböző pályákon mozognak. Ez a kialakítás felkelti a figyelmet.
A kép életre kel
Nehéz webhelyet találni képek nélkül. A minőségi és demonstratív rajzok vonzzák a látogatókat. De a legtöbb figyelmet a különféle dinamikus képek hívják fel. Valójában, ha mozgás van egy webhely meglátogatásakor, akkor ez felkelti a figyelmet. Jelentősen megnöveli annak valószínűségét, hogy a látogató visszatér egy erőforráshoz egy dinamikus képhez. Mozogni látszott vagy nem? Ezért, hogy látogatókat vonzzon az oldalra, érdemes tanulmányozni egy olyan dolgot, mint a parallaxis hatás.
Példák mozgóképes webhelyekre:
- hvorostovsky.com;
- www.kagisointeractive.com.
Amint a példákban is látható, az élményt a legördülő menük javítják alelemekre. Egy ilyen elem időt takarít meg a látogatók számára, ezért vonzó számukra.
jLekérdezési könyvtár
A jQueryParallax kifejezés az azonos nevű könyvtárat határozza meg. Ennek köszönhetően 3D formátumban könnyű elérni a mozgás hatását. A jQuery könyvtárban a 3D-s érzékelés többféleképpen jön létre. Az egyik a háttérobjektumok vízszintes egyidejű mozgatásakülönböző sebességgel. Ezt a könyvtárat nagyszámú különféle tulajdonság jelenléte jellemzi. És az itt leírt elmozdulás csak egy kis része a képességeinek.
Elég vonzónak tűnik az oldal, amelynek elkészítéséhez különféle modern elemeket használtak. Az egyik a parallaxis. A példaoldalak így nézhetnek ki:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buysellwebsite.com.
jParallaxist az egérrel mozgó rétegek képviselnek. A dinamikus elemeket abszolút pozicionálás jellemzi (pozíció:abszolút;). Mindegyiket saját mérete és egyedi sebességű mozgás jellemzi. Ez lehet szöveg vagy kép (az erőforrás készítőinek kérésére).
Az oldal látogatójának megítélése
Ezután az ember általában odafigyel arra, hogy az oldal minőségi, kényelmes és hozzáértő legyen. Ezt a tényt általában tiszteletben tartják. Előfordul, hogy kíváncsiság támad más elemek kipróbálására. Nagyon sok azonos oldal található az interneten. Hogyan teheti különlegessé az erőforrást?
Ha tetszik a design, a látogató hosszabb ideig marad. Így megnő annak valószínűsége, hogy a közzétett információk vonzzák, érdeklődni fog. Ennek eredményeként egy személy a kínált szolgáltatást, terméket vagy promóciós ajánlatot fogja használni.
Kedvenc régi játékok
A "parallaxis" fogalmát mindenki ismeria 80-as és 90-es évek konzolrajongói. Ez a következő játékokra vonatkozik:
- Mario Bros.
- Mortal Kombat.
- Streets of Rage.
- Moon Patrol.
- Teknősök az időben.
Azaz, a parallaxis egy olyan technika, amelyet meglehetősen hosszú ideje használnak. Ezekre a játékokra valóban némi nosztalgiával emlékeznek vissza. Végül is úgy tűnik, hogy átitatják őket annak az időszaknak a karaktere.
A képernyőn megjelenő képek olyan technikával jönnek létre, mint a parallaxis görgetés. Nincs abban semmi meglepő, hogy ez a technika megérdemelt népszerűségre tett szert. Ezt a tervezési koncepciót szívesen fogadják azok, akik a 80-90-es években játszottak, vagy a barátok szabadidejét nézték.
Parallax görgetés
A világ vezető márkáinak marketingesei régóta alkalmaznak mindenféle technikai vívmányt. Így lehetővé válik az oldal alkalmi látogatójának is felkeltése.
A parallax görgetést a Nike meglehetősen sikeresen alkalmazta. A cég eredeti weboldalát Weiden és Kennedy tervezte. De ez a terv nem maradt fenn. Az erőforrás fokozatosan frissült, korunk trendjei szerint. Az Activatedrinks.com egy példa egy olyan webhelyre, amelynek kialakítása a Nike korabeli marketingesei által használt webhelyre emlékeztet.
A hangszórók ne legyenek túl sokak
Ne felejtse el, hogy gyakran az oldal kialakítása a kulcsfontosságú kritérium, amely a látogatót irányítja. Rosszul kivitelezettaz erőforrás általában a tulajdonos cég komolytalanságának benyomását kelti a felhasználóban. De a mindenféle vonzó design elemet tartalmazó webhely azt jelzi, hogy a szervezet tulajdonosai a látogatók érdeklődésére törekednek.
Itt érdemes megemlékezni a parallaxisról. Ez egy csodálatos eszköz. De még nekik sem szabad túlságosan elragadtatniuk. Mert az oldal, amelyen nagyszámú különféle mozgó elem található, meglehetősen nehezen érzékelhető. A legjobb, ha a kialakítást mérsékelten stílusossá és érthetővé teszi.
A dinamikus egyéni elemeknek kell lenniük, amelyek kijelölést igényelnek. Előfordulhat olyan kép is, amely egymáshoz képest mozgó rétegek felhasználásával jön létre. Ne feledje, hogy a felhasználói oldal elsősorban a látogatók számára készült. Nem kell egy webmester remekművének lennie, aki minden tudását beleadta. Végül is egy ilyen megközelítés csak bonyolítja az észlelést.
Webhelynavigáció létrehozása
Hogyan készítsünk parallaxist? Ez a kérdés sok webhely-készítőt érdekel. Nem szükséges ismerni a címkék írásának bonyolultságát. Nagyon kényelmes speciális források használata az interneten. A rendelkezésre álló nagyszámú ajánlat közül a következő segítőket lehet megkülönböztetni:
- A Plax egy meglehetősen könnyen használható program. Hajlamos az egér mozgatásával gördülékenyebbé tenni az old alt.
- jQuery Parallax Image Slider – Képcsúszkák létrehozására használt jQuery beépülő modul.
- Jquery Image Parallax - alkalmas átlátszó rajzok tervezésére. A PNG-k használata révén a GIF-ek mélységet kapnak, mozgás által animálva.
- A Curtain.js segítségével fix paneleket tartalmazó oldal hozható létre. Ebben az esetben a függöny kinyitásának hatása figyelhető meg.
- Parallaxis görgetése: A jQuery beépülő modul parallaxis effektust hoz létre, amikor görgeti az egér görgőjét.
Néhány hasznos bővítmény
Mint tudod, az információ a legnagyobb érték. És minél több módot ismerünk a kívánt elérésére, annál nagyobb a valószínűsége a helyes eredmény elérésének. Hasznos bővítmények a dinamika létrehozásához:
- jQuery Scroll Path – objektumok elhelyezésére szolgál a megadott útvonalon.
- A Scrollorama egy jQuery beépülő modul. A vonzó anyagtervezés eszközeként használják. Lehetővé teszi az oldalon lévő szöveg „újraélesztését” a kényelmes görgetésnek köszönhetően.
- A Scrolldeck egy jQuery beépülő modul. Ez egy nagyszerű prezentációs megoldás egyoldalas webhelyekhez.
- jParallaxis a rétegek mozgását jelenti az egérmutató mozgásától függően.
- A Stellar.js egy olyan bővítmény, amellyel bármely elemet parallaxis görgetési effektus hozzáadásával terveztek.
Parallaxis a kurzorhoz rögzítve
Ez a parallaxis egészen lenyűgözőnek tűnik. Első pillantásra mozdulatlanA webhelyoldal objektumai elmozdulnak, amikor az egérkurzor közeledik. Úgy tűnik, életre kel, és követi a mozgó elemet.
Először is állj meg a képnél. A kívánt kép keretbe kerül, a széleit pedig el kell rejteni. A módszer nagyon egyszerű, és a kapott rajz meglehetősen vonzónak tűnik.
A parallaxis effektus a webhelyen a tervezés csodálatos módja. Használata azt jelzi, hogy kellő figyelmet fordítottak az erőforrás létrehozására. Ezért érdemes odafigyelni a kínált szolgáltatásokra vagy az elolvasandó információkra. Az ilyen webhelyek előnyösebbnek tűnnek az azonos, de egyszerűen megtervezett források hátterében.
