Scrolling

Lo scrolling^[1]^[2] (lett. "scorrimento" in inglese), scorrimento^[3]^[4] o scroll^[5] (lett. "scorrere") consiste nello spostamento di testi, immagini o video su un display, verticalmente e/o orizzontalmente. Lo scorrimento in sé non cambia la disposizione del testo o delle immagini, ma sposta la visuale dell'utente su ciò che appare essere un'immagine più grande non interamente visibile, facendo scomparire parte dei dati in un lato dello schermo e facendone apparire di nuovi dal lato opposto.^[2]

Immagine animata in cui lo scorrimento è reso dal movimento della griglia

Lo scrolling può avvenire completamente senza intervento dell'utente (similmente ai titoli di coda di un film) o, su un dispositivo interattivo, può essere attivato in molti modi come spostando apposite barre con il mouse, girando la rotella del mouse,^[4] via touchscreen o con la pressione di un tasto. Lo scrolling può consistere di incrementi discreti (ad es. una o poche righe di testo alla volta) o in modo che all'occhio umano appaia continuo (smooth scrolling). Il frame rate è la velocità con cui un'intera immagine viene ridisegnata, ed è correlato allo scrolling nel senso che le modifiche alla posizione del testo e delle immagini possono avvenire solo con la stessa frequenza con cui l'immagine può essere ridisegnata. Quando il frame rate è un fattore limitante, lo smooth scrolling viene simulato sfocando le immagini durante il movimento, che altrimenti sembrerebbero "saltellare".^{[senza fonte]}

Lo scorrimento può essere presente in tutti i generi di applicazione informatica (interfacce utente, videogiochi, web design, ecc.).

Parallasse

Un esempio fittizio di scorrimento con parallasse: le montagne in lontananza scorrono più lentamente

Lo scorrimento con parallasse o parallattico (in inglese parallax scrolling) utilizza un paesaggio composto da almeno due strati di immagini sovrapposte, uno di primo piano e uno di sfondo, che scorrono in modo indipendente l'uno dall'altro. Lo strato o gli strati virtualmente più lontani dall'osservatore dello schermo scorrono più lentamente, dando un maggiore effetto di profondità alla scena.^[6]

Viene simulato il fenomeno ottico della parallasse, per il quale un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione, e lo spostamento è inversamente proporzionale alla distanza.

Nei videogiochi

Nell'ambito dei videogiochi, in particolare bidimensionali, lo scorrimento è il movimento dell'immagine di sfondo per simulare l'attraversamento di un ambiente più grande dello schermo. Può essere presente in tutti i generi di videogiochi dotati di grafica, ed è un effetto piuttosto comune, tanto da caratterizzare dei sottogeneri come lo sparatutto a scorrimento e il picchiaduro a scorrimento. Sono noti videogiochi a scorrimento almeno dal 1974, con il gioco di guida Speed Race della Taito^[7].

I tipi di scorrimento più comuni sono lo scorrimento orizzontale o laterale, verso destra o meno frequentemente verso sinistra, e lo scorrimento verticale, verso l'alto o meno frequentemente verso il basso^[8]. Quando si parla ad esempio di scorrimento verso destra, ci si riferisce al verso in cui il gioco progredisce, ossia nel mondo immaginario del gioco si avanza verso destra; ma ciò si ottiene facendo scorrere le immagini di sfondo in direzione opposta, verso sinistra.

Sono comunque diffusi anche lo scorrimento diagonale, reso celebre la prima volta da Zaxxon (1982); lo scorrimento bidirezionale, in entrambi i sensi, quando c'è la possibilità di tornare indietro (es. Defender); lo scorrimento multidirezionale, che va dal misto di orizzontale e verticale (es. Rally-X) fino alla rotazione in tutte le direzioni (es. Time Pilot).

Un'altra distinzione rilevante è tra lo scorrimento libero, che avviene solo in base ai comandi del giocatore, e lo scorrimento automatico o continuo (auto-scrolling), che avviene forzatamente senza controllo diretto da parte del giocatore, che è quindi costretto ad affrontare il gioco alla velocità di avanzamento predefinita. Nell'ambito degli sparatutto, ad esempio, lo scorrimento continuo è stato reso celebre da Scramble (1981) e successivamente molto imitato; questa tecnica permette allo sviluppatore del gioco di pianificare con precisione con quale ritmo il giocatore incontrerà nemici, scenari ed eventi^[9]. Ci sono anche titoli che mescolano le due tecniche, come Super Mario Bros. 3 che introduce l'auto-scrolling solo in alcuni dei livelli più avanzati^[8].

La tecnica dello scorrimento parallattico, introdotta nei videogiochi nel 1982 con Moon Patrol^[10], divenne molto comune su Amiga e Super Nintendo^[6].

Nel design web

Una delle prime implementazioni dello scorrimento a parallasse nei browser fu creata e condivisa in un post sul blog dallo sviluppatore web Glutnix nel 2007:^[11]^[12] includeva un codice di esempio e una demo utilizzando JavaScript e CSS 2 che supportavano Internet Explorer 6 e altri browser di quell'epoca; è stato solo nel 2011, con l'introduzione della codifica HTML5 e CSS 3, che la tecnica è diventata popolare tra i web designer.

I sostenitori sostengono che sia un modo semplice per simulare la fluidità del Web.^[13] I sostenitori utilizzano gli sfondi a parallasse come strumento per coinvolgere meglio gli utenti e migliorare l'esperienza complessiva fornita da un sito Web.^[14]

Adottare un approccio narrativo per guidare i visitatori attraverso il sito web fa durare più a lungo la visualizzazione della pagina e incoraggia il visitatore a scorrerne l'intera pagina, per impressionare il visitatore e suscitare curiosità su ulteriori contenuti; tuttavia, l’uso della parallasse crea anche degli svantaggi per un sito web: la maggior parte dei siti che utilizzano questo effetto sono spesso a pagina singola, il che ha un effetto dannoso sulla SEO e sulla velocità di caricamento della pagina stessa.^[15]

Note

^ Scrolling, in Treccani.it – Vocabolario Treccani on line, Roma, Istituto dell'Enciclopedia Italiana. URL consultato il 28 ottobre 2023.
^ ^a ^b Scrolling, in Treccani.it – Enciclopedie on line, Roma, Istituto dell'Enciclopedia Italiana. URL consultato il 28 ottobre 2023.
^ scorriménto (6), in Treccani.it – Vocabolario Treccani on line, Roma, Istituto dell'Enciclopedia Italiana.
^ ^a ^b Sinonimo di: Scorrimento, su sapere.virgilio.it.
^ Scroll, su sapere.it, De Agostini. URL consultato il 28 ottobre 2023.
^ ^a ^b Thomas, Orland e Steinberg 2007, p. 49.
^ (EN) What Was The First Coin-Op Video Game to Feature Scrolling?, su allincolorforaquarter.blogspot.it, 14 aprile 2013.
^ ^a ^b Thomas, Orland e Steinberg 2007, p. 57.
^ Whitehead 2007.
^ (EN) Golden Age - Chronology of the History of Video Games, su thocp.net (archiviato dall'url originale il 27 novembre 2009).
^ (EN) Parallax Backgrounds, su inner.geek, 20 marzo 2007. URL consultato il 26 ottobre 2023.
^ (EN) Showcasing the CSS Parallax Effect: 12 1 Creative Usages ¦ kremalicious, su kremalicious.com, 22 maggio 2008. URL consultato il 26 ottobre 2023.
^ Dan Internet Archive, Handcrafted CSS : more bulletproof Web design, Berkeley, CA : New Riders, 2010, ISBN 978-0-321-64338-4. URL consultato il 26 ottobre 2023.
^ Dede Frederick, The Effects Of Parallax Scrolling On User Experience And Preference In Web Design, in Department of Computer Graphics Technology Degree Theses, 18 aprile 2013. URL consultato il 26 ottobre 2023.
^ (EN) Billie, What is Parallax Website Design? Best Practices and Examples, su Passionate Design Agency, 9 ottobre 2021. URL consultato il 26 ottobre 2023.

Bibliografia

(EN) David Thomas, Kyle Orland e Scott Steinberg, scrolling, parallax scrolling, in The Videogame Style Guide and Reference Manual, Power Play Publishing, 2007, pp. 57-58, 49, ISBN 978-1-4303-1305-2.
(EN) Jim Whitehead, Game Genres: Shmup (PDF), University of California Santa Cruz, 2007, pp. 11-15. URL consultato il 12 giugno 2016 (archiviato dall'url originale il 28 febbraio 2016).

Altri progetti

Wikimedia Commons contiene immagini o altri file sullo scrolling

Collegamenti esterni

scrolling, su Treccani.it – Enciclopedie on line, Istituto dell'Enciclopedia Italiana.
scrolling, su Vocabolario Treccani, Istituto dell'Enciclopedia Italiana.
(EN) Denis Howe, scrolling, in Free On-line Dictionary of Computing. Disponibile con licenza GFDL
Scrolling, in Grande Dizionario di Italiano, Garzanti Linguistica.
Scroll, su sapere.it, De Agostini.

Portale Informatica

Portale Videogiochi

[1] Scrolling, in Treccani.it – Vocabolario Treccani on line, Roma, Istituto dell'Enciclopedia Italiana. URL consultato il 28 ottobre 2023.

[treccani-2] Scrolling, in Treccani.it – Enciclopedie on line, Roma, Istituto dell'Enciclopedia Italiana. URL consultato il 28 ottobre 2023.

[3] scorriménto (6), in Treccani.it – Vocabolario Treccani on line, Roma, Istituto dell'Enciclopedia Italiana.

[sapere-4] Sinonimo di: Scorrimento, su sapere.virgilio.it.

[5] Scroll, su sapere.it, De Agostini. URL consultato il 28 ottobre 2023.

[vsgp-6] Thomas, Orland e Steinberg 2007, p. 49.

[7] (EN) What Was The First Coin-Op Video Game to Feature Scrolling?, su allincolorforaquarter.blogspot.it, 14 aprile 2013.

[vsg-8] Thomas, Orland e Steinberg 2007, p. 57.

[shmups-9] Whitehead 2007.

[10] (EN) Golden Age - Chronology of the History of Video Games, su thocp.net (archiviato dall'url originale il 27 novembre 2009).

[11] (EN) Parallax Backgrounds, su inner.geek, 20 marzo 2007. URL consultato il 26 ottobre 2023.

[12] (EN) Showcasing the CSS Parallax Effect: 12 1 Creative Usages ¦ kremalicious, su kremalicious.com, 22 maggio 2008. URL consultato il 26 ottobre 2023.

[13] Dan Internet Archive, Handcrafted CSS : more bulletproof Web design, Berkeley, CA : New Riders, 2010, ISBN 978-0-321-64338-4. URL consultato il 26 ottobre 2023.

[14] Dede Frederick, The Effects Of Parallax Scrolling On User Experience And Preference In Web Design, in Department of Computer Graphics Technology Degree Theses, 18 aprile 2013. URL consultato il 26 ottobre 2023.

[15] (EN) Billie, What is Parallax Website Design? Best Practices and Examples, su Passionate Design Agency, 9 ottobre 2021. URL consultato il 26 ottobre 2023.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]