4.2.1
Livello di astrazione
In un primo momento era necessario capire se la libreria da realizzare dovesse essere una libreria che partisse “da zero”, quindi una libreria che implementasse tutti i meccanismi di animazione di scrollytelling a basso livello a cui agganciare dei blocchi di astrazione realizzabili con blocchi configurabili, o se fosse possibile partire da una libreria di scrollytelling già esistente per realizzarne un’astrazione ad alto livello, realizzando una sorta di wrapper54.
Nonostante la prima soluzione sia da considerarsi più potente e maggiormente configurabile, in quanto la manipolazione di ogni elemento sarebbe stata controllata con maggior sicurezza, l’interesse di questa ricerca riguardava soprattutto lo studio delle componenti del paradigma di visualizzazione in questione; capire se queste seguissero una particolare logica di configurazione o un qualsivoglia pattern di struttura, se fosse possibile astrarre dai prodotti presenti online per realizzare una sorta di template HTML. Data questa esigenza di analisi, è stato chiaro che una
54 Termine informatico con cui si indicano dei moduli software che rivestono altri software, spesso
implementazione da zero della libreria fosse al di fuori dal tema di ricerca, e si è quindi optato per realizzare ScrollAStory.js come un wrapper di una libreria già presente e già utilizzata da programmatori web.
Durante la fase di ideazione della libreria, è stata eseguita una ricerca riguardo delle librerie JavaScript che permettono di implementare pagine di scrollytelling55, così da poter scegliere una libreria di supporto e appoggio per la successiva realizzazione di ScrollAStory.js.
Una volta analizzate le varie librerie, riportate in 3.4, la scelta della libreria di appoggio è ricaduta su scrollmagic.js, in quanto risulta essere una libreria estremamente adattiva e configurabile tramite l’utilizzo delle dimensioni dei vari componenti della pagina, che possono essere ricavate in maniera dinamica tramite interrogazioni al document HTML.
4.2.2
Class-based behaviour
Rispetto alle altre librerie trovate online, ScrollAStory.js permette al creatore di contenuti di evitare scrittura di codice attraverso cui posizionare gli elementi all’interno della pagina o far partire animazioni tipiche del paradigma dello scrollytelling.
Come riportato in precedenza, nelle pagine analizzate sono state individuate delle
sezioni ricorrenti: questa individuazione ha permesso una lineare implementazione di
contenitori a sé stanti entro cui inserire codice HTML, facendo sì che queste sezioni fossero inscrivibili entro div HTML dalla facile composizione.
Per ogni tipologia di sezione individuata, è stata realizzata un componente che implementa autonomamente il comportamento e la resa grafica del tipo di sezione desiderata, lasciando all’utilizzatore della libreria la necessità di configurare solo
Una pagina di ScrollAStory.js è quindi composta da una sequenza di queste sezioni, ciascuna rappresentata da un div, che viene tipizzato e configurato usando opportune classi. L’uso di una particolare gerarchia di classi permette infatti di poter creare una pagina web dal comportamento complesso scrivendo solo il file HTML ed un eventuale file CSS di supporto per controllare l’aspetto grafico della pagina secondo le proprie esigenze.
La configurazione delle caratteristiche e delle funzionalità delle varie componenti si ispira alla libreria Bootstrap56, anch’essa basata sull’utilizzo di blocchi div HTML che seguono una particolare gerarchia, associata ad una ben prestabilita combinazione di classi associate ad ogni nodo HTML, la cui combinazione genera un determinato output grafico ed uno specifico comportamento, senza che il creatore di contenuti debba prestare particolare attenzione ai dettagli pratici dell’implementazione della pagina.
4.2.3
Le sezioni di ScrollAStory.js
Come detto, il corpo di una pagina web che usa ScrollAStory.js è una sequenza di sezioni, ciascuna delle quali ha uno specifico comportamento.
Le sezioni utilizzabili, individuate dai sottotipi della classe sas_section, sono: • Statica, realizzabile con la classe static_section;
• Con comparsa animata, realizzabile con la classe revealing_element_section; • Con elemento fisso, realizzabile con la classe pinning_element_section; • Con vari elementi fissi, realizzabile con la classe variable_pinning_elements; • Con elementi HTML su immagini di sfondo, realizzabile con la classe
text_on_fixed_backgrounds;
• Con elemento fisso animabile tramite step discreti, realizzabile con la classe
discreete_pinning_element;
• Con elemento pinnato animabile in maniera continua, realizzabile con la classe
continuous_pinning_element;
Ciascuna sezione della pagina sarà quindi un div, completo di un identificativo univoco (proprietà id) e un titolo (proprietà title).
Il div della sezione avrà la classe sas_section, per indicare che si tratta di una sezione di ScrollAStory.js, e una sottoclasse scelta fra le precedenti per stabilirne aspetto e comportamento. Altre configurazioni specifiche, come dimensione ed allineamento, saranno controllate da altre sotto classi e modificatori.
Sezione statica: static_section
La sezione statica si traduce in un contenitore di tag HTML che non gode di nessuna animazione scrollytelling, mostrandosi come una qualsiasi struttura HTML. Funge da canonico contenitore di tag HTML, renderizzandoli in maniera standard, senza l’aggiunta di nessun tipo di animazione tipica dello scrollytelling.
La sua creazione si basa sulla scrittura di un blocco div avente i seguenti attributi: • id: identificativo univoco della sezione;
• title: titolo associato alla sezione;
• class: contenente una ben precisa combinazione di classi predefinite che permettono al blocco di divenire una sezione statica; il contenitore deve difatti avere le classi sas_section e static_section. Oltre a queste, sarà possibile aggiungere classi aggiuntive per una migliore manipolazione grafica del contenuto riportato all’interno del blocco.
Una volta creato il contenitore, è possibile inserire al suo interno qualsiasi tipologia di tag HTML, per un numero illimitato di figli del div padre.
Di seguito è riportato un esempio riguardo ad una possibile implementazione della sezione in oggetto.
<div id=”intro” title=”Introduction” class=”sas_section static_section”>
<h1>Introduzione</h1> <p>Testo del paragrafo</p> <!-- altri tag HTML --> </div>
Figura 20. Renderizzazione della sezione di tipo statico.
Sezione con comparsa animata: revealing_element_section
La sezione con comparsa animata si traduce in un contenitore di tag HTML che compaiono una volta che l’utente arriva ad avere l’inizio della sezione in questione coincidente con metà dell’altezza della viewport.
La sua creazione si basa sulla scrittura di un blocco div avente i seguenti attributi: • id: identificativo univoco della sezione;
• title: titolo associato alla sezione;
• class: contenente una ben precisa combinazione di classi predefinite che permettono al blocco di divenire una sezione di scrollytelling; il contenitore deve difatti avere le classi sas_section, animation_section e
revealing_element_section. Oltre a queste, sarà possibile aggiungere classi
aggiuntive per una migliore manipolazione grafica del contenuto riportato all’interno del blocco.
<div id=”id_0” title=”title_0” class=”sas_section animation_section revealing_element_section”>
<!-- sotto contenitori --> </div>
Al suo interno sono necessari due ulteriori contenitori:
• section_trigger_point: permette di avviare l’animazione. Non deve contenere elementi HTML al suo interno, in quanto funge da punto di trigger per l’avvio dell’animazione di scrollytelling;
• section_revealing: al suo interno dovranno essere inseriti dei tag HTML che riporteranno il corpo della sezione, la quale comparirà una volta che l’utente, scorrendo il sito web, arriverà ad avere metà pagina occupata dalla sezione in questione.
Una volta creato il contenitore e i sotto componenti gerarchizzati, è possibile inserire all’interno del blocco section_revealing qualsiasi tipologia di tag HTML, per un numero illimitato di figli.
<div id=”id_0” title=”title_0” class=”sas_section animation_section revealing_element_section”>
<div class=”section_trigger_point”>
<!-- punto in cui inizia l’animazione --> <!-- non inserire tag HTML -->
</div>
<div class=”section_revealing”> <!-- tag HTML vari --> <h1>Titolo</h1>
<p>Corpo della sezione</p> <!-- tag HTML vari --> </div>
</div>
Utilizzando la sintassi di classi mostrata in esempio, la sezione a comparsa avrà un allineamento orientato a sinistra. Per modificare il comportamento di default, sarà necessario utilizzare una particolare parola chiave, dopo la classe
revealing_element_section, tramite una sintassi ben definita: -allineamento.
Se, ad esempio, la sezione deve avere un allineamento centrato, la classe dovrà essere modificata nel seguente modo:
revealing_element_section-center
Per l’allineamento a sinistra, dovrà essere utilizzata la parola left, mentre per quello a destra la parola right.
Figura 21. Renderizzazione della sezione a comparsa animata.
Sezione con elemento fisso: pinning_element_section
La sezione con elemento fisso si traduce in un contenitore di tag HTML diviso in due colonne: una è occupata da un elemento che rimane agganciato alla vista durante lo scorrimento dell’utente sulla pagina, mentre l’altra reagisce canonicamente all’azione di scroll. Questa, che è una delle animazioni tipiche dello scrollytelling, viene attivata non appena il pixel coincidente all’inizio della sezione coincide con l’origine della viewport57.
La sua creazione si basa sulla scrittura di un blocco div avente i seguenti attributi: • id: identificativo univoco della sezione;
• title: titolo associato alla sezione;
• class: contenente una ben precisa combinazione di classi predefinite che permettono al blocco di divenire una sezione di scrollytelling; il contenitore deve difatti avere le classi sas_section, scrolly_section e
pinning_element_section. Oltre a queste, sarà possibile aggiungere classi
aggiuntive per una migliore manipolazione grafica del contenuto riportato all’interno del blocco.
<div id=”id_0” title=”title_0” class=”sas_section scrolly_section pinning_element_section>
<!-- sotto contenitori --> </div>
Al suo interno, sono richiesti altri tre contenitori:
• section_trigger_point: permetterà l’avvio di ScrollMagic, creando la scena in cui saranno presenti l’elemento che rimane fissato durante lo scroll e quello che scorrerà secondo la velocità che l’utente decide di adottare. È necessario non aggiungere nessun figlio alla componente in questione.
• section_content: contenente la parte della sezione che continuerà a muoversi normalmente in base all’azione di scroll dell’utente;
• section_pinning_element: al suo interno dovrà essere inserito l’elemento HTML che si desidera far rimanere agganciato durante lo scorrimento della porzione della pagina.
Una volta creato il contenitore e i sotto componenti gerarchizzati, è possibile inserire all’interno del blocco section_content qualsiasi tipologia di tag HTML, per un numero illimitato di figli. Per quel che riguarda il blocco section_pinning_element è consigliato l’inserimento di un unico tag HTML.
Di seguito è riportato un esempio riguardo ad una possibile implementazione della sezione in oggetto.
<div id=”id_0” title=”title_0” class=”sas_section scrolly_section pinning_element_section>
<div class=”section_trigger_point”>
<!-- punto in cui inizia l’animazione --> <!-- non inserire tag HTML -->
<div class=”section_content”> <!-- tag HTML vari --> <h1>Titolo</h1>
<p>Corpo della sezione</p> <!-- tag HTML vari --> </div>
<div class=”section_pinning_element”>
<!-- unico tag HTML sempre visibile --> <!-- durante lo scroll dell’utente → <h1>Elemento fisso</h1>
</div> </div>
Utilizzando la sintassi di classi mostrata in esempio, verrà realizzata una sezione in cui l’elemento fisso è posizionato a sinistra e occuperà il 50% della larghezza della pagina, mentre il contenuto scrollabile occuperà la restante parte e sarà posizionato a destra. Per poter modificare questa impostazione di default, è necessario aggiungere due parole chiave con una sintassi ben definita, dopo la classe pinning_element_section: - posizionamento.percentuale.
Queste due informazioni aggiuntive, permettono di modificare la posizione e la larghezza dell’elemento che rimarrà fissato nella sezione. Ad esempio, se vogliamo che questo sia posizionato a sinistra, ma occupi il 20% della larghezza totale della pagina, sarà necessario modificare la classe secondo questa sintassi:
pinning_element_section-left.20
Se, invece, la collocazione deve essere a destra e la sua larghezza deve essere del 40% della pagina, la modifica sarà la seguente:
pinning_element_section-right.40
occuperà, nel primo caso, l’80% della pagina e verrà collocata a destra, nel secondo caso il 60% della pagina e sarà collocata a sinistra.
Figura 22. Renderizzazione della sezione con elemento fisso.
Sezione con vari elementi fissi: variable_pinning_elements
La sezione con vari elementi fissi si traduce in un contenitore di tag HTML diviso in due colonne come la sezione presentata in precedenza: una colonna è occupata da un elemento fisso che durante lo scorrimento dell’utente sulla pagina cambia in base a dove l’utente si trova all’interno della sezione, mentre l’altra reagisce canonicamente all’azione di scroll. Questa tipologia di animazione viene attivata non appena il pixel coincidente all’inizio della sezione coincide con l’origine della viewport.
La sua creazione si basa sulla scrittura di un blocco div avente i seguenti attributi: • id: identificativo univoco della sezione;
• title: titolo associato alla sezione;
• class: contenente una ben precisa combinazione di classi predefinite che permettono al blocco di divenire una sezione di scrollytelling; il contenitore deve difatti avere le classi sas_section, scrolly_section e
aggiuntive per una migliore manipolazione grafica del contenuto riportato all’interno del blocco.
<div id=”id_0” title=”title_0” class=”sas_section scrolly_section variable_pinning_elements”>
<!-- sotto contenitori --> </div>
Al suo interno, sono richiesti altri tre contenitori:
• section_trigger_point: permette di creare una scena di ScrollMagic, realizzando una porzione di pagina in cui è presente una zona occupata dai vari elementi che devono rimanere fissi, e una occupata dalla componente scrollabile, entro cui verranno inseriti i punti che attiveranno la modifica dell’elemento fissato. È necessario lasciare il contenitore in questione privo di
nodi figlio;
• section_content: in cui verrà inserita la parte scrollabile;
• section_pinning_element: in cui sono inseriti gli elementi che rimarranno fissi.
Una volta creato il contenitore e i sotto componenti gerarchizzati, è possibile inserire all’interno del blocco section_content un numero illimitato di blocchi div, aventi:
• id: identificativo univoco del blocco;
• class=”steps_pinnings_elements_trigg”: classe che permetterà alla libreria di capire quale elemento inserito in section_pinning_element dovrà essere visualizzato.
• class=”variable_pinned_element”: classe che permetterà alla libreria di attivare o disattivare la visualizzazione dell’elemento HTML inserito. Il primo elemento fisso dovrà inoltre avere anche la classe
visible_steps_section_pinning_element, la quale permetterà al primo elemento
di essere subito visibile all’utente.
Di seguito è riportato un esempio riguardo ad una possibile implementazione della sezione in oggetto.
<div id=”id_0” title=”title_0” class=”sas_section scrolly_section variable_pinning_elements”>
<div class=”section_trigger_point”>
<!-- punto in cui inizia l’animazione --> <!-- non inserire tag HTML -->
</div>
<div class=”section_content”>
<!-- serie di blocchi div -->
<div id=”uno” class=”step_pinnings_elements_trigg”> Uno
</div>
<div id=”due” class=”step_pinnings_elements_trigg”> Due
</div>
<!-- serie di blocchi div --> </div>
<div class=”section_pinning_element”>
<!-- serie di tag HTML che rimarranno fissi -->
<div id=”uno_fisso” class=”variable_pinned_element visible_steps_section_pinning_element> Elemento fisso uno
</div>
<div id=”due_fisso” class=”variable_pinned_element> Elemento fisso due
</div> </div>
</div>
Utilizzando la sintassi di classi mostrata in esempio, verrà realizzata una sezione in cui l’elemento fisso è posizionato a sinistra e occuperà il 50% della larghezza della pagina, mentre il contenuto scrollabile occuperà la restante parte e sarà posizionato a destra. Per poter modificare questa impostazione di default, è necessario aggiungere due parole chiave con una sintassi ben definita, dopo la classe variable_pinning_elements: -posizionamento.percentuale.
Queste due informazioni aggiuntive, permettono di modificare la posizione e la larghezza dell’elemento che rimarrà fissato nella sezione; se vogliamo che questo sia posizionato a sinistra, occupando il 20% della larghezza totale della pagina, sarà necessario modificare la classe secondo questa sintassi:
pinning_element_section-left.20
Se invece la collocazione deve essere a destra e la sua larghezza deve corrispondere al 40% della pagina, la modifica sarà la seguente:
pinning_element_section-right.40
Adottate queste modifiche, il resto della sezione si adatterà automaticamente, modificando quindi la larghezza della parte a cui applicare l’effetto di scroll che occuperà, nel primo caso, l’80% della pagina e verrà collocata a destra, nel secondo caso il 60% della pagina e sarà collocata a sinistra.
Figura 22. Renderizzazione sezione con vari elementi fissi
Sezione con elementi HTML su immagini di sfondo: text_on_fixed_background La sezione con vari elementi HTML su immagini di sfondo, si traduce in un contenitore di tag HTML il cui sfondo cambia in base alla posizione dell’utente all’interno della viewport. Questa tipologia di animazione viene attivata non appena il pixel coincidente all’inizio entra all’interno della viewport, mentre il cambio di sfondo, non appena viene “superato” uno degli elementi HTML inseriti nel contenitore.
La sua creazione si basa sulla scrittura di un blocco div avente i seguenti attributi: • id: identificativo univoco della sezione;
• title: titolo associato alla sezione;
• class: contenente una ben precisa combinazione di classi predefinite che permettono al blocco di divenire una sezione di scrollytelling; il contenitore deve difatti avere le classi sas_section, photography_section e
text_on_fixed_backgrounds. Oltre a queste, sarà possibile aggiungere classi
aggiuntive per una migliore manipolazione grafica del contenuto riportato all’interno del blocco.
<div id=”id_0” title=”title_0” class=”sas_section photography_section text_on_fixed_backgrounds”>
</div>
Al suo interno, sono richiesti tanti contenitori per quante sono le immagini di sfondo che si vuole visualizzare. Questi contenitori div hanno associata la classe
section_description, che a sua volta conterrà:
• un tag img nel cui attributo src dovrà essere riportato il percorso relativo all’immagine di sfondo per la porzione di sezione in questione, associando al tag in questione la classe images_sources. Questa permetterà a ScrollAStory.js di associare la corretta immagine alla corretta porzione di sezione, in base alla posizione dell’utente nella viewport;
• un contenitore div in cui inserire elementi HTML, quelli che verranno visualizzati in sovrimpressione allo sfondo. Il contenitore dovrà avere associato
o id: che permetterà alla libreria di assegnare a quella specifica porzione l’immagine corretta;
o class=”section_description_components”: questa permetterà alla libreria di risalire al contenitore degli elementi HTML da visualizzare sugli sfondi.
Di seguito è riportato un esempio riguardo ad una possibile implementazione della sezione in oggetto.
<div id=”id_0” title=”title_0” class=”sas_section photography_section text_on_fixed_backgrounds”>
<div class=”section_description”>
<img src=”../img/image_1.png” class=”images_sources”/> <div id=”id_0_0” class=”section_description_components”>