Come spesso succede nel mondo dello sviluppo web, esistono esempi di queste pagine completamente “fatti a mano”, ossia dove la gestione dello scroll e della interazione dei vari elementi è stata interamente programmata dal creatore di contenuti usando JavaScript e CSS, ma esistono anche alcune librerie che, con differenti livelli di astrazione e supporto, permettono di realizzare pagine scrollytelling.
Russell Goldenberg, uno degli editor di The Pudding47, pubblica un articolo sul sito nel gennaio 2017, in cui fornisce una lista delle librerie più utilizzate per l’implementazione di un prodotto che possa essere etichettato come “prodotto di scrollytelling”:
• Waypoints.js: libreria JavaScript realizzata da I Make Web Thing48 che si
integra con jQuery49, Zepto50; supportata anche da Internet Explorer (Waypoints, 2019).
• Scrollstory.js: plugin di jQuery volto alla realizzazione di interazioni basate sullo scroll della pagina web su cui è utilizzata (Williams, 2019).
• Scrollmagic.js: completa riscrittura della precedente Superscrollama, realizzata da John Polacek. La libreria mantiene un approccio object oriented, utilizzando controlli per ogni contenitore di scroll, fornendo la possibilità di annettere varie scene che definiscono cosa accadrà alla pagina e in quale momento (Paepke, 2019).
• Graph-scroll.js: estensione della libreria di visualizzazione d3.js, sviluppata principalmente per gestire gli eventi di scroll sui grafici realizzati con la suddetta libreria (Pearce, 2019).
• In-view.js: libreria che gestisce gli eventi di entrata e uscita di un particolare elemento DOM dal viewport, registrando delle funzioni che gestiscono questi particolari eventi e che prendono in input l’elemento in questione. La libreria manipola e gestisce gli eventi scatenati da un particolare elemento, non permettendo una buona personalizzazione dello scrollytelling (Wiegert, 2019). • Scrollama.js: libreria realizzata da Goldenberg, dove il focus è dato dalle performance dell’interazione tramite la classe IntersectionObserver51, le cui
API forniscono un modo per poter analizzare in maniera asincrona le modifiche di intersezione tra un elemento e il suo contenitore, o un elemento e la viewport
48 http://imakewebthings.com/ - ultimo accesso in data 20 marzo 2019.
49 Libreria JavaScript che facilita la manipolazione degli elementi che compongono il Document Object
Model (DOM), lo standard ufficiale del W3C.
50 Libreria JavaScript compatibile con jQuery che permette di avere circa le stesse funzionalità fornite
da questa, occupando minor spazio, velocizzando quindi il suo caricamento.
generale. (Goldenberg, GitHub - russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver., 2019).
4
ScrollAStory.js
La scelta di realizzare una libreria JavaScript che permettesse l’impostazione e impaginazione di pagine web di scrollytelling, nasce dal desiderio di rendere questo paradigma di narrazione online il più fruibile possibile, in quanto nonostante esistano già librerie che permettono di realizzare pagine web di questo tipo, quest’ultime risultano ancorate a delle dimensioni (spesso in pixel) che il programmatore web deve manipolare al “millimetro” per riuscire ad ottenere una corretta resa grafica, dovendo spesso implementare e assemblare manualmente effetti e animazioni.
L’obiettivo era realizzare una libreria in grado di soddisfare le seguenti esigenze: ● Automazione. Il creatore di contenuti non è un programmatore: deve essergli
data la possibilità di realizzare prodotti di scrollytelling anche senza la minima conoscenza in programmazione. In più le librerie esistenti hanno bisogno di misurazioni “al pixel” per poter funzionare, e questo passaggio deve essere surclassato; la libreria deve quindi adattarsi automaticamente ai contenuti e ai comportamenti scelti dall’utente, adattandosi anche alla dimensione della finestra da cui viene visualizzata.
● Linearità. Nello scrollytelling è possibile creare pagine dinamiche, cariche di animazioni spesso intrecciate tra loro. Questa particolare implementazione,
estremamente coreografica, è fonte di enorme distrazione, andando a ridurre la comprensione di ciò che è riportato all’interno della pagina web. Dato che la semplicità gestuale di questo paradigma di visualizzazione è sembrata una qualità valida per far incrementare in maniera accattivante e con poche distrazioni la fruizione delle informazioni online, la libreria deve concentrarsi su un utilizzo più lineare, in cui le animazioni e i comportamenti dinamici avvengono uno alla volta, potendo aggiungere tra di loro degli intervalli di blocchi statici.
● Modularità. La libreria sarà basata su componenti, ognuno dei quali implementerà uno specifico comportamento/animazione/effetto del paradigma di scrollytelling. Una pagina sarà composta da una sequenza di questi componenti, i quali devono essere configurabili con parametri, oltre che assemblabili in maniera semplice, un blocco alla volta. Una gestione modulare consente anche di aggiungere in futuro nuovi tipi di comportamenti, animazioni ed effetti.
● Flessibilità. La libreria, oltre alle animazioni di elementi HTML considerabili puri, deve poter interagire con delle componenti JavaScript di terze parti, come visualizzatori specializzati (ad esempio, il visualizzatore 3D usato dal National Geographics), così da permettere la creazione di visualizzazioni multimediali complesse.
Come visto nell’analisi dei siti esistenti52, gli scopi per cui viene utilizzato il paradigma
di visualizzazione in questione sono molto vari, ma il campo in cui è molto più frequente trovare una sua realizzazione è quello del long form journalism. Per questo motivo, oltre al fatto che le caratteristiche sopra elencate risultano essere perfettamente sintonizzate, questa particolare forma di giornalismo online è stata scelta come target di utilizzo. Difatti, idealmente era stato posto come ultimo obiettivo la realizzazione di una libreria che potesse essere utilizzata all’interno di una redazione di testate online, permettendo la creazione di articoli basati sul paradigma dello scrollytelling in maniera semplice, e possibilmente visuale.
ScrollAStory.js, il risultato di questa tesi, è una libreria JavaScript che permette di realizzare delle pagine di scrollytelling tramite l’uso di una particolare struttura modulare di contenitori HTML. Questi blocchi vengono configurati dal creatore di contenuti grazie ad una gerarchia di classi, e automaticamente trasformati al caricamento della pagina in elementi dinamici che si auto-dimensionano in base al contenuto e comportamento richiesto.