Parallax technika

A Wikipédiából, a szabad enciklopédiából
Ugrás a navigációhoz Ugrás a kereséshez

A parallax technika (más néven parallax görgetés vagy parallax dizájn) egy különleges képalkotási technika, amelynek lényege a többrétegű megjelenítés, ahol a háttérben található rétegek lassabban mozdulnak el a szemlélő számára, mint az előtérben találhatóak, így keltenek háromdimenziós hatást. A mélység érzékeltetésére alkalmas módszer a multiplán kameráktól származik,[1] amelyet az 1930-as évek rajzfilmjeinél alkalmaztak először. A parallax technika az 1980-as években a játéktermi videójátékokban is megjelent, legújabban pedig a webdizájn területén alkalmazzák széles körben parallax dizájn vagy parallax görgetés néven.

Módszerek[szerkesztés]

A parallax előállításának négy hagyományos módszere létezik, melyeket játéktermi játékok, videójátékok és asztali számítógépek esetében alkalmaznak:[2][3]

Réteges módszer[szerkesztés]

Azon kijelző rendszerek esetében, amelyek támogatják a több háttérréteg megjelenítését, a parallax technikát előállíthatják úgy, hogy függőlegesen és vízszintesen az egyes rétegeket különböző mértékben tolják el egymáshoz képest, ezzel szimulálva a multiplán kamerát. A személő így a gyorsabban mozgó rétegeket közelebbinek fogja érzékelni. Egyes rétegeket gyakran a játéktér elé helyezik (a réteg elé, amely azokat a tárgyakat tartalmazza, melyekkel a játékos interakcióba léphet). Ennek funkciója lehet a térhatás fokozása, a játék egyes részleteinek elrejtése vagy a játékos megzavarása.

Sprite módszer[szerkesztés]

A programozók sprite-ok, azaz önállóan irányítható mozgó objektumok pszeudo-rétegeit helyezhetik el a rétegek mögött vagy előtt. A NES-re megjelent Star Force és a Super NES-re kiadott Final Fight játékok ezt a módszert alkalmazták.

Ismétlődő minta vagy animáció[szerkesztés]

Az ismétlődő háttér vagy animáció előtt elhelyezett objektumok is előidézhetik a parallax hatást, sok játék esetében például ismétlődő csillagmezőt használtak ilyen célra háttérként.

Raszter módszer[szerkesztés]

A rasztergrafikában általában felülről lefelé frissülnek a pixelek egy képen, némi késleltetéssel. Ezt egyes játékok esetében arra használták fel, hogy parallax hatást érjenek el úgy, hogy több réteg meglétének illúzióját keltik.

Parallax technika a webdizájnban[szerkesztés]

A parallax dizájn a webdizájn területén a 2011-es évben kezdett széles körben megjelenni a HTML5 és a CSS3,illetve a jQuery lehetőségeit kihasználva. A technikát használó weboldalak célja elsősorban a felhasználói élmény javítása, a felhasználók elköteleződésének erősítése.[4] Az egyik legelső weboldal, amely a parallax görgetést használta fel, a Nike Better World volt, amely a HTML5 lehetőségeit kihasználva egy történetet mesélt el és a Nike termékeit népszerűsítette.[5]

A parallax dizájn általában különféle mélységérzetet keltő hátterek használatával, illetve az előtérbe helyezett lebegő elemek megjelenítésével valósul meg a weboldalak létrehozásakor.

Az előtérbe helyezett lebegő elemek javíthatják egy weboldal funkcionalitását, így például a segítségükkel frissen keletkező tartalmakra hívható fel a felhasználó figyelme, vagy animált formában mutatható be egy termék használatának módja. Más esetekben a parallax dizájn alkalmazásának a célja mindössze az oldalról alkotott kép javítása, a felhasználók tetszésének elnyerése.

A parallax technika ellenzői szerint annak megvalósítása túlságosan erőforrás-igényes, a weboldal elemei lassan töltődnek be, és így nem is feltétlenül játszanak szerepet a felhasználói benyomás kialakulásában, amely már az első 50 milliszekundumban megtörténik,[6] emellett akár zavaró is lehet a felhasználók egy része számára.[7][8] A technika alkalmazását pártolók azonban azzal érvelnek, hogy mivel a felhasználók számos weboldalt látogatnak meg egy nap, éppen a parallax technikához hasonló megoldások lehetnek azok, amelyek egy oldalt egyedivé és emlékezetessé tesznek;[9][10] illetve úgy vélik, a technika alkalmas a web folytonosságának érzékeltetésére.[11]

A parallax dizájn nagy hátránya, amely hátráltatja széles körű alkalmazását, hogy nem kompatibilis a reszponzív és mobil dizájnnal. Az okostelefonokon és más kisebb készülékeken a parallax dizájnt használó oldalak általában nem jelennek meg megfelelően (elsősorban iOS operációs rendszert használó eszközöknél[12]), amennyiben pedig igen, úgy a mozgó elemek a kisebb képernyőn inkább zavarják a felhasználót. Az online marketing szempontjából szintén nem ideális technika, ugyanis mivel a parallax görgetést használó weboldalak általában egyetlen oldallal rendelkeznek, és azon található meg minden tartalom, a kevéssé hatékonyan keresőoptimalizálható. A hatékonyabb keresőoptimalizálás[13] ugyanakkor megoldható például belső linkek elhelyezésével, vagy a több oldalra osztással.

A parallax technikával készült weboldalak elsősorban úgynevezett egyoldalas weblapokon jelentek meg, illetve ilyeneken alkalmazzák jelenleg is. Ezeket főleg termék vagy szolgáltatás ismertetésére alakítják ki, illetve a weboldal egyes elemeinek segítségével valamilyen cselekvésre ösztönzik a látogatókat. Ilyen cselekvés lehet egy hírlevél-feliratkozás, egy videó megtekintése, vagy akár egy rendelés leadás. Ezeket nevezzük szaknyelven landing page-nek, vagyis érkező weboldalnak, aminek célja, hogy a látogatót a cselekvés irányába terelje, és ne térítse el ettől a céltól. Az ilyen típusú weboldalak esetén terjedt el elsősorban a parallax technika, bár az igazán látványos elemek sokszor ellenhatást érhetnek el, ha nem megfelelően vannak használva.

A parallax veszélyei[szerkesztés]

A parallax görgetés elterjedésével a webdizájnban, illetve azzal, hogy az Apple iPhone készülékeinek kezdőképernyője 2013-tól kezdve alkalmazza a technikát az iOS 7 frissítéstől kezdődően, megnövekedett azon esetek száma, melyek során a felhasználók émelygésre, szédülésre vagy fejfájásra panaszkodtak.[14][15] Ez a frissítés a Retina Ready, aminek a célja az volt, hogy a készülék figyelje a szemmozgást és ezeket az elemeket jobban világítsa meg hátulról, vagy legyen élesebb, színesebb az adott részlet. Amikor sok inger éri a szemet, zavaróvá válhat a hirtelen fókuszváltás, emiatt előfordulhat émelygés, hányinger, szédülés.

A parallax hatás ugyanis vizuálisan indukált mozgási betegséget (Visually Induced Motion Sickness, VIMS) idézhet elő, mely során a vesztibuláris rendszer és az érzékszervek nem jeleznek mozgást, a szem azonban igen. A jelenség becslések szerint a populáció kevesebb mint 5 százalékát érintheti.[16]

Források[szerkesztés]

  1. Paul Wyatt: The art of parallax scrolling. mos.futurenet.com (angolul) (2007) (Hozzáférés: 2015. feb. 20.) (PDF) arch
  2. Cory Janssen: What is parallax scrolling? www.techopedia.com (angolul) (Hozzáférés: 2015. feb. 20.)
  3. Ryan Boudreaux: How the parallax effect is used in web design. www.techrepublic.com (angolul) (2012. ápr. 24.) (Hozzáférés: 2015. feb. 20.)
  4. Parallax Design az új generáció? designertanfolyam.hu (2014. nov. 18.) (Hozzáférés: 2015. feb. 20.)
  5. Richard Shepherd: Behind The Scenes Of Nike Better World. www.smashingmagazine.com (angolul) (2011. jún. 12.) (Hozzáférés: 2015. feb. 20.)
  6. Gitte Lindgaard – Gary Fernandes – Cathy Dudek – J. Brown: Attention web designers: You have 50 milliseconds to make a good first impression! www.anaandjelic.typepad.com. (angolul) Behaviour & Information Technology (2006) (Hozzáférés: 2015. feb. 20.) (PDF)
  7. Eric Jaffe: Snow Fail: Do Readers Really Prefer Parallax Web Design? www.fastcodesign.com (angolul) (2013. dec. 9.)
  8. How The Web Design Trend of Parallax Scrolling Has Faded. www.designyourway.net (angolul) (Hozzáférés: 2015. feb. 20.)
  9. Dede M. Frederick: The Effects Of Parallax Scrolling On UserExperience And Preference In Web Design. docs.lib.purdue.edu. (angolul) Purdue University Department of Computer Graphics Technology (2013. ápr. 18.) (Hozzáférés: 2015. feb. 20.) (PDF)
  10. Vishal Gaikar: Everything About Responsive Websites & Parallax Websites: Choose Wisely! www.tricksmachine.com (angolul) (2013. jún. 24.) (Hozzáférés: 2015. feb. 20.)
  11. Dan Cederholm – Ethan Marcotte: Handcrafted CSS: More Bulletproof Web Design. books.google.hu. (angolul) New Riders (2010) (Hozzáférés: 2015. feb. 20.)
  12. A word on mobile devices and parallax scrolling. www.javascriptkit.com (angolul) (Hozzáférés: 2015. feb. 20.)
  13. Jaymes Brown: What Is Parallax Web Design? www.unleashed-technologies.com (angolul) (2013. aug. 15.) (Hozzáférés: 2015. feb. 20.)
  14. Christopher Mims: Digital motion sickness will be the occupational disease of the 21st century. qz.com (angolul) (2013. szept. 18.) (Hozzáférés: 2015. feb. 20.)
  15. Szántai Károly: Szédítő webdizájn, avagy a parallax veszélye. www.akadalymentesweb.hu (2014. okt. 8.) (Hozzáférés: 2015. feb. 20.)
  16. Craig Grannell: Why iOS 7 is making some users sick. www.theguardian.com. (angolul) The Guardian (2013. szept. 27.) (Hozzáférés: 2015. feb. 20.)

Fordítás[szerkesztés]

Ez a szócikk részben vagy egészben a Parallax scrolling című angol Wikipédia-szócikk ezen változatának fordításán alapul. Az eredeti cikk szerkesztőit annak laptörténete sorolja fel.