Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédlet

Scrollytelling – Mesemondás az egérgörgővel

2021. augusztus 05. | Bognár Péter

# # # # #

A világ, legalábbis az ember szemén keresztül nézve, történetekből épül fel. Az egyik legalapvetőbb emberi igény, hogy értelmes mintákba rendezzük a minket körülvevő környezetet, és narratívákba, történetekbe illesszük be a körülöttünk történő eseményeket. A mesemondás a tábortűz körül üldögélő ősemberektől a Netflixig végigkíséri fajunk történelmét, és gyakorlatilag minden tartalom, amit az ember fogyaszt, óhatatlanul valamilyen narratívába fog elrendeződni a befogadó fejében. 

Kép: Pexels

A történetmesélés régóta kulcsfogalom a marketing célú tartalomkészítésben és a vizuális designban is – botorság lenne nem nyúlni ehhez a fantasztikus hatású eszközhöz (mi is írtunk ról már több alkalommal, például itt és itt). A storytelling – szakmai berkekben az angol kifejezés rögzült – a tartalomírás és -szerkesztés régi alapelve. Ha a tálalt információt személyesebbé, valamilyen (mégha rettentő egyszerű) narratíva részévé tesszük, sokkal könnyebben tudunk kapcsolódni a fogyasztóhoz, ugyanis erre a mentális trükkre a legtöbben nincsenek felkészülve, ez a fajta lelki ráhangolódás az egyik legmélyebben bedrótozott reakció minden emberi lényben. 

Sokan állítják, hogy a modern web fejlődéséhez egy hardveres fejlesztés járult hozzá a legnagyobb mértékben, ez pedig nem más, mint az egérgörgő. Ez a kis kerekecske a két gomb között egymagában felelős a facebook soha ki nem fogyó hírfolyama mellett lényegében azért, ahogy ma a weboldalakat szerkesztjük. A gördítés, szép magyar szóval scrollozás az internethasználatunk szerves, elidegeníthetetlen részévé vált. 

De hogy jön ez a kettő egymáshoz?

2012 decemberében a New York Times megjelentetett egy hosszú anyagot a fél évvel korábban, az egész amerikai közvélyeményt megmozgató, Tunnel Creek-i síparadicsomban történt lavina történetéről. A hosszú formátumú újságírás iskolapéldájaként az írott anyag gyakorlatilag egy kisebb könyvre elegendő szöveget tartalmazott. Mivel a szerkesztők úgy döntöttek, hogy a sztorit az interneten jelentetik meg, felmerült az ötlet, hogy a modern web lehetőségeit kihasználva alaposan feljavítsák az olvasói élményt. 

A korábbi, 1-2 képernyőnyi részletekre feldarabolt szövegek és “tovább” gombok helyett minden nagy fejezet egy-egy igen hosszú oldalra került, amin kapcsolók keresése heylett kizárólag görgetéssel kellett navigálni. A lefelé görgetett szövegfal oldalán a szokásos beillesztett fotók mellett a scrollozással ki-beúszó egész képernyő szélességű videó-illusztrációk jelentek meg, az írott tartalom mellett képek galériák, videó és hangbejátszások, animált grafikák tették teljesen interaktívvá az olvasási élményt. 

Újszerű megoldásnak érződött, hogy az egyes elemek ugyan a szöveg gördítésével tűntek be-vagy ki, de ugyanakkor önálló életet is éltek, és a szövegétől eltérő ritmusban, a történet szükségei szerint mozogtak, pl. a szöveget kiegészítő térkép az egy-két releváns oldal idejéig ott ragadt az oldal szélén, és csak azután gördült ki a képből.  A végeredményként születő honlap hatalmas sikernek bizonyult, és végül egy Pulitzer díjat is hozott a lapnak. Ezzel pedig megszületett egy új fogalom a webdesignban, a scollytelling, ami azóta is töretlen népszerűségnek örvend. 

Hol használjuk?

A scrollytelling tehát mára alapvetően a hosszabb tartalmak webes megjelenítésének az egyik bevett módja. Milyen tartalmakra használhatjuk jellemzően? Szinte bármi szóba jöhet, a lényeg, hogy sok anyagunk legyen, de példaképp szedjünk össze néhány olyan tartalomtípust, ami kifejezetten jól adja magát ehhez a megoldáshoz:

  • Hosszú szöveges anyagok: a scrollytelling segíthet megtartani az olvasó figyelmét és végigvezetni a szövegen 
  • Kevert multimédiás anyagok: olyan tartalmak, ahol sok kép, videó jelenik meg a szöveggel együtt, ezek érdekesebb beosztására lehet hasznos a technika
  • Statisztikák, száraz adatokból felépülő tartalmak: mint egy jó előadó, a görgetős megoldás segít követhetőbbé tenni a számokat és kiemelni a fontosabb adatokat a többi közül
  • Infografika-jellegű ismeretterjesztő anyagok: a lényeget itt szintén rövidebb információmorzsák és ezek összefüggései adják. Akárcsak a száraz adathalmazokat, a scrollytelling ezeket is remekül tagolja, élményszerűbbé teszi
  • Landing Page-ek: itt amúgy is alapvető fontosságú, hogy megtartsuk, fenntartsuk a látogató figyelmét és személyes kapcsolatot létesítsünk vele – a scrollytellingnek pedig éppen ezek a legnagyobb előnyei

Előnyei

A scrollytelling legnagyobb előnye tehát, hogy élményszerűvé teszi a vagy túlságosan hosszú, vagy túlságosan tömény tartalmakat. Ugyanekkor a görgős elbeszélés tartalmaz egyfajta játékos, újszerű érzést is (annak ellenére, hogy a technika már közel sem nevezhető újdonságnak), és a váratlan irányokból befutó, vagy az egérgörgő mozgatására a megszokottaktól eltérően viselkedő elemek, mint valami érdekes, kézbe vehető új játékszer, izgalmas, taktilis érzetet kölcsönöznek az oldalaknak. 

Hátrányai

Ahogy az már biztosan benned is felmerült a cikk olvasása közben, egy igazán jó scrollytelling oldal mögött nem kevés tervezés és munka áll – bár mostanra nagyon gyakori eszközzé vált, még mindig nem magától értetődő része  az átlagos webdesigner eszköztárának – magyarul macerás. Ez egyben azt is jelenti, hogy alaposan megfontolja az ember, hogy ilyen jellegű oldalt tervezzen, hiszen  – főleg az első alkalmakkor – jóval hosszabb tervezési és fejlesztési idővel kellhet számolni.

A másik hátrány inkább csak afféle emlékeztető: a scrollytelling kizárólag egyfajta, jól körülhatárolt weblap-élményt tud nyújtani a felhasználónak: ez a fókuszált, a történet elbeszélése által diktált tempóban haladó, az animációkat, vicceket megélő immerzív befogadói élmény. Ha ez a célunk, már kezdhetjük is a tervezést. Ha viszont sejthető, hogy az átlagos látogató nem erre az élményre vágyik, azaz például nem lesz ideje végiglibegni a kis varázsligetünkön, hanem gyorsan szeretné megszerezni a számára releváns információt vagy eljutni az őt érdeklő termékig, akkor a hatalmas képekkel, idézetekkel, beúszó grafikákal belassított honlap éppen hogy az idegeire fog menni.

A scrollytelling eszköztára

A storytelling oldalakat más néven long scrolling oldalaknak is nevezik. A használható technikáknak természetesen csak a fantáziánk és a kódolási képességeink szabnak határt, de van néhány jellemző technika, ami mondhatni  mostanra a scrollytelling klasszikus eszköztárába tartozik.

Parallax scrolling – a különböző sebességgel gördülő elemekkel nem csak térhatást lehet elérni, minta régi videójátékokban, hanem immerzíven tudunk képeket, videókat elhelyezni a szövegben.

Tapadós elemek – egyes, a szöveggel együtt gördülő objektumok egy bizonyos ponton megtapadnak, míg a szöveg mellettük tovább halad, majd adott esetben távoznak

Be- és kitűnő elemek – ahogy a scrollozás egy bizonyos pontra ér, valamilyen animált módon megjelenik 1-2 objektum (fade in, slide in, stb.), majd ugyanígy távozik is.

Gördítéssel animáló objektumok – bármilyen animáció, legyen az a képernyőn áthaladó akármi, kirajzolódó grafikon, körbeforduló 3D-s ábra, ami a görgő mozgatásával együtt halad előre, vagy éppen, ha visszafele tekerünk, hátra.  

Hogyan lehet ezt előállítani?

Sajnos ezek a megoldások már a legtöbbször meghaladják a sima CSS kódolás kereteit, ami azt jelenti, hogy mindenféle ravasz JavaScript trükkökre lesz szükségünk, ha mi magunk szeretnénk lekódolni egy ilyen stílsú oldalt. Persze az ember nincs teljesen magára hagyva, bőségesen lehet segédleteket némi rövid internetes kotorászás után.  

A legklasszikusabb megoldás egyenesen a Wall Street Journal műhelyéből érkezik, ez a Two Step nevű JavaScript könyvtár, amit a saját cikkeikhez fejlesztettek ki a WSJ web-gurui, majd a nagyérdemű rendelkezésére bocsátották. A könyvtár eredeti célja a szöveg haladásával párhuzamosan, dinamikusan változó diagramok, ábrák megjelenítése volt, de kis kreativitással nagyon sokféle scrollytelling oldalhoz használható.

Abszolút érdemes még Russel Goldberg cikkében is elmélyedni, itt rögtön hat könyvtárat gyűjt össze, amik segíthetnek egy long scrolling oldal megépítésében. A cikk folytatásában (a linket az első bekezdésben találod), a reszponzív megoldásokról is egy kicsit több szó esik.

Pageflow

A Pageflow a német WDR televízió támogatásával jött létre, és kifejezetten az a célja, hogy scrollytelling formátumú, látványos cikkeket lehessen létrehozni vele. Mivel egy közszolgálati televízió hozta létre, alapvetően egy nyílt forráskódú, bárki számára használható projektről van szó – a kevésbé jó hír (bár ez abszolút személyfüggő), hogy a Pageflow egy Rails motor, azaz ha ebben a környezetben nem vagy különösebben járatos, jobb, ha inkább másfelé kutakodsz tovább. 

A Pageflow amúgy a Wix, WordPress.com és társaik nyomán működik hosted webszolgáltatásként is, ilyenkor előfizetési díjért cserébe egy vizuális editort is kaphat a webdesigner, hogy a Ruby különösebb ismerete nélkül is nekivághasson a tervezésnek. 

WordPress

Ha a WordPressben szeretnénk long scrolling oldalakat, természetesen megint csak egy maréknyi plugint kell alaposabban szemügyre venni. 

Simple Long Form

Egy egyszerű plugin, amit bárki használhat (uyganakkor, ha bele szeretnél a kódba is piszkálni, némi bootstrap ismerettel ez sem kizárt,  fejlesztő maga is támogatja). Az alapkoncepció szerint a plugin bevezet egy új poszt-típust, a “longform”-ot, de a frissítések óta már be is építhető a teljes WP installációba is. 

Aesop Story Engine

A nagy görög mesemondóról elnevezett plugin egy egész csomagot takar, ami különböző nyílt forráskódú eszközök összefogásával kínál egy praktikus műhelyt a storytelling oldalakat építeni vágyó webdesignereknek. A csomag jelenleg tizenhárom komponensből áll, olyan elemeket találhatunk közöttük, mint a parallax scroll, a a scrollozással összekapcsolt idővonal, audió- vagy videó-beillesztés, térképbeszúrás, stb. Az Aesop ingyenesen használható – viszont rengeteg kész témát és további kiegészítő komponenseket vásárolhatunk hozzá, amivel  még egyszerűbben dobhatunk össze lenyűgöző oldalakat a megrendelőink számára. 

Sticky Menu or Sticky Header

Az Aesop Engine-hez képest ez egy faék egyszerűségű eszköz, amivel egyszerűen (ahogy a név is mutatja) tapadóssá tehetjük a layout egy-egy elemét, azaz, amikor az adott, mondjuk, kép eléri az oldal tetejét, egyszerűen ott marad. Fejléceket, képeket, widgeteket, logókat, CTA-kat és lebegő menüket is tepadóssá tehetünk – ráadásul meghatározhatunk olyan elemeket is, amik aztán a felragasztott bigyót mégis odébb viszik – ezzel a képlettel pedig máris nagyon pofás scrollytelling oldalakat tudunk készíteni.

Scroll-triggered Animations

Zárásul pedig egy egyszerű plugin, amivel gördítésre aktiválódó CSS animációkat kapcsolahatunk a honlapunk különböző elemeihez. A plugin sajnos nem teljesen ingyenes, ugyanis a bevált recept szerint az animációk és egyéb lehetőségek egy része csak a prémium verzióban érhető el (ami viszont amúgy nem különösebben drága). A Scroll-triggered Animations a beépített animációk mellé (közel 30) a saját CSS varázslataink beépítésére is. 

Címkép: Jess and Russ

Webdesign webináriumok minden hónapban!

Feliratkozom!
Iratkozz fel YouTube csatornákra!

blog

Segédlet Mi az a linkbait?

Mi az a linkbait?

2021. augusztus 30.

Nem clickbait, arról pedig már biztosan hallottál. A linkbait is egyike a webdesign napjainkban kikerülhetetlen édes(?) testvére, a SEO szakzsargonjában nyüzsgő kifejezéseknek. Mint minden valódi terminus technicus, ez is valami valójában közismert, nem túl bonyolult fogalmat ír le, de a saját speciális szemszögéből tálalva, és annak a tükrében értelmezve. Ez magyarán azt jelenti, hogy a […]

Tovább a cikkre
Secured By miniOrange