L’ultima moda del web design è il parallax scrolling*, la tecnica con la quale si creano animazioni in funzione dello scrolling della pagina; concettualmente è molte semplice da realizzare, basta registrarsi all’evento onScroll e far reagire l’animazione di conseguenza, purtroppo però nel web design fare cose concettualmente semplici richiede molti accorgimenti per ottenere un buon effetto, possibilmente il medesimo, su tutti i possibili client.
*Il termine è in realtà abusato in quanto la maggior parte delle pagine utilizzano semplici animazioni dipendenti dallo scrolling, mentre il parallax scrolling prevedere di sovrapporre diverse animazioni con velocità di scrolling differenti per dare un effetto 3d, simulando per l’appunto la parallasse. Per esempio basti pensare ai primi Supermario in cui lo sfondo si muoveva più lento del livello di gioco.
Una buona libreria a cui appoggiarsi per realizzare un animazione di questo tipo senza preoccuparsi troppo dei dettagli implementativi è Skrollr; funziona sia su mobile sia su desktop ed è relativamente piccola (9.6K minified).
Un punto di forza di questa libreria è che non occorre usare javascript, permette di animare praticamente qualsiasi proprietà CSS3 scrivendo direttamente in linea all’oggetto, l’unico codice necessario è quello da inserire a pagina caricata per inizializzare skrollr:
<script type="text/javascript" src="skrollr.min.js"></script> <script type="text/javascript"> skrollr.init(); </script> </body>
Fatto questo possiamo animare qualsiasi proprietà di qualsiasi oggetto nella pagina in questo modo:
<div style="position: fixed;" data-0="width: 10px; background: rgb(255, 0, 0); height: 10px" data-300="width: 100px; background: rgb(0, 0, 255); height: 100px" ></div>
Inserendo l’attributo data-x specifichiamo le proprietà che deve avere l’oggetto quando la pagina è scrollata di x pixel, la libreria penserà a fare l’interpolazione per l’animazione e a rendere il tutto cross-browser e adatto ai dispositivi mobili.
Possiamo anche specificare più passi intermedi inserendo più attributi data-x, inoltre supporta CSS3 quindi possiamo usare molte cose interessanti come ad esempio transform:
<div style="position: fixed; padding: 20px; text-align: center;" data-0="width: 10px; background: rgb(255, 0, 0); height: 10px; " data-600="width: 150px; background: rgb(0, 0, 255); height: 150px; transform: rotate(0deg)" data-900="width: 150px; background: rgb(0, 0, 255); height: 150px; transform: rotate(360deg);" > <span data-600="font-size: 5em; color: rgb(255, 0, 0); opacity: 0;" data-900="opacity: 1;" ></span> </div>
La libreria permette anche cose più avanzate, ad esempio si può fare l’animazione non solo in funzione dello scrolling assoluto ma anche rispetto alla posizione nel viewport (parte visibile della pagina) o rispetto alla posizione di altri elementi; altra cosa veramente interessante è che permette di animare path SVG, guardate l’esempio fornito con la libreria.
Per avere idea delle potenzialità di skrollr guardate questo sito.
L’importante però è non lasciarsi prendere troppo la mano, è fin troppo pieno di siti troppo fighi per caricarsi in meno di un minuto e per non sovraccaricare il motore del browser; da grandi poteri derivano grandi responsabilità, non abusatene! Anche perché un sito che usa parallax scrolling fatto male è veramente frustrante e anti-utente.
