Parallax és mélységérzet – a réteges weboldal

Ha vonatból nézünk ki az ablakon, a közeli fák gyorsan suhannak el, a távoli hegyek alig mozdulnak. Ebből a különbségből érzékeli az agyunk a távolságot. A weboldalakon ugyanezt a hatást nevezzük parallaxnak: a rétegek eltérő sebességgel mozognak, és a lapos képernyő mélységet kap.

Hogyan jön létre a mélység?

A mélységérzethez nem kell 3D. Néhány egyszerű eszköz együtt is térbeli hatást kelt:

• Rétegek eltérő sebességgel: a háttér lassabban úszik görgetéskor, mint a tartalom.
• Méret és élesség: a távolabbi elemek kisebbek, halványabbak, puhábbak.
• Fény és árnyék: egy fényforrás, amely a rétegeket különbözőképpen világítja meg.
• Áttetszőség: az üvegszerű, homályosító felületek mögött „látszik” a háttér – ettől érezzük, hogy van mögöttük valami.
• Reakció a mutatóra: az elemek kissé eltérően billennek, ahogy az egér mozog.

Visszafogott parallax

A parallax egy időben divatból túlzásba ment: egész oldalak csúsztak egymásra, a szöveg az ellenkező irányba mozgott, mint a görgetés. Ez látványos volt, de fárasztó, és sokaknak rosszullétet okozott.

A mai, jól működő parallax finom:

• csak néhány elemet érint, jellemzően a hátteret vagy egy díszítő réteget;
• a sebességkülönbség kicsi;
• a szöveg sosem mozog görgetés közben – az olvasnivaló stabil marad.

Mélység parallax nélkül

Sokszor a görgetéshez kötött mozgás nélkül is elérhető a térhatás. A mi oldalunkon a mélységet elsősorban a rétegek adják: egy méhsejtháló a háttérben, rajta vándorló fény, előtte áttetsző üvegkártyák, amelyek lassan lebegnek. A látogató semmit nem „pörget”, mégis térben érzi magát.

Ez azért is jó, mert kevesebb számítást igényel, és a mozgáscsökkentő beállítás esetén egyszerűen megállítható – a rétegek ott maradnak, csak nem mozognak.

Mikor ne?

• Mobilon a teljes képernyős parallax gyakran akadozik, és a telefon görgetési lendületével is ütközhet.
• Hosszú szövegeknél a háttér mozgása elvonja a figyelmet.
• Ha a mozgás a tartalom megértését nehezíti – például a kép egy része csak bizonyos görgetési pontban látszik.

A mérce

Egy jó mélységhatás olyan, mint egy jól megvilágított tér: az ember nem a lámpákat nézi, hanem egyszerűen jól érzi magát benne. Ha a látogató a parallaxra figyel a tartalom helyett, túl erős.

Arról, milyen eszközökkel készülhet ilyen mozgás, külön írtunk. Ha mélységet adna a saját oldalának, az animáció és interakció oldalon leírjuk, hogyan dolgozunk.