Parallax technika
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. 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.[4]
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,[5] emellett akár zavaró is lehet a felhasználók egy része számára.[6][7] 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;[8][9] illetve úgy vélik, a technika alkalmas a web folytonosságának érzékeltetésére.[10]
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[11]), 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[12] 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.[13] 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.[14]
Források
[szerkesztés]- ↑ Paul Wyatt: The art of parallax scrolling. mos.futurenet.com (angolul) (2007) (Hozzáférés: 2015. február 20.) (PDF) arch
- ↑ Cory Janssen: What is parallax scrolling? www.techopedia.com (angolul) (Hozzáférés: 2015. február 20.)
- ↑ Ryan Boudreaux: How the parallax effect is used in web design. www.techrepublic.com (angolul) (2012. április 24.) (Hozzáférés: 2015. február 20.)
- ↑ Richard Shepherd: Behind The Scenes Of Nike Better World. www.smashingmagazine.com (angolul) (2011. június 12.) (Hozzáférés: 2015. február 20.)
- ↑ 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. február 20.) (PDF)
- ↑ Eric Jaffe: Snow Fail: Do Readers Really Prefer Parallax Web Design? www.fastcodesign.com (angolul) (2013. december 9.)
- ↑ How The Web Design Trend of Parallax Scrolling Has Faded. www.designyourway.net (angolul) (Hozzáférés: 2015. február 20.)
- ↑ 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. április 18.) (Hozzáférés: 2015. február 20.) (PDF)
- ↑ Vishal Gaikar: Everything About Responsive Websites & Parallax Websites: Choose Wisely! www.tricksmachine.com (angolul) (2013. június 24.) (Hozzáférés: 2015. február 20.)
- ↑ Dan Cederholm – Ethan Marcotte: Handcrafted CSS: More Bulletproof Web Design. books.google.hu. (angolul) New Riders (2010) (Hozzáférés: 2015. február 20.)
- ↑ A word on mobile devices and parallax scrolling. www.javascriptkit.com (angolul) (Hozzáférés: 2015. február 20.)
- ↑ Jaymes Brown: What Is Parallax Web Design? www.unleashed-technologies.com (angolul) (2013. augusztus 15.) (Hozzáférés: 2015. február 20.) arch
- ↑ Christopher Mims: Digital motion sickness will be the occupational disease of the 21st century. qz.com (angolul) (2013. szeptember 18.) (Hozzáférés: 2015. február 20.)
- ↑ Craig Grannell: Why iOS 7 is making some users sick. www.theguardian.com. (angolul) The Guardian (2013. szeptember 27.) (Hozzáférés: 2015. február 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. Ez a jelzés csupán a megfogalmazás eredetét és a szerzői jogokat jelzi, nem szolgál a cikkben szereplő információk forrásmegjelöléseként.