Insieme all'effetto parallax, una tipologia di design di recente piuttosto comune è rappresentata da pagine singole con animazioni attivate contestualmente allo scrolling della pagina stessa. L'esempio forse più noto è quello della pagina di presentazione dei nuovi iPhone sul sito di Apple. In questo articolo, con il supporto di un paio di librerie CSS e JavaScript, impareremo a ricreare proprio questo tipo di animazioni. Iniziamo subito.
In cosa consiste l'effetto
Le soluzioni per implementare questo tipo di effetto sono diverse, ma tutte accomunate dall'abbinare una parte JavaScript per la gestione degli eventi, in particolare dello scrolling e delle sue coordinate, e una parte CSS costituita dalla definizione delle animazioni e delle transizioni.
Tecnicamente, si tratta di intercettare via JavaScript il momento in cui, scorrendo la pagina, un certo elemento diviene visibile nella viewport del browser. A questo evento si associa l'attivazione di una o più animazioni che danno così un tocco di vita all'elemento stesso e alla pagina nel suo complesso. Tra gli script più potenti e complessi, segnaliamo solo Skrollr.js, una soluzione tuttofare in grado di gestire al meglio anche il famoso (o famigerato, per alcuni) effetto parallax.
Nel nostro caso ci siamo affidati ad una libreria JavaScript molto più contenuta rispetto alle potenzialità, ma assolutamente adeguata rispetto alle nostre necessità, oltre che più leggera e di facile gestione.
Le librerie Jack In The Box e animate.css
La soluzione che abbiamo scelto si chiama Jack In The Box, e se si esclude il fatto che il nome può essere decisamente fuorviante, ha tutto quello che ci serve per ricreare in pochi semplici passi animazioni abbinate allo scrolling.
L'autore del plugin (richiede l'uso di jQuery) ha sfruttato per le animazioni CSS l'eccellente libreria Animate.css di Daniel Eden. Si tratta di una collezione di animazioni basate sui CSS facilmente applicabili a qualunque elemento di una pagina con l'uso di specifiche classi nel codice HTML.
Animate.css è una libreria sufficientemente 'neutra' per consentire la sua adozione in svariati contesti e ha dato origine a diversi progetti collaterali e derivati. Ci limitiamo a segnalare qui lo script per animazioni Animo.js, ma anche Jack In the Box rientra in questa categoria.
Per farsi un'idea delle svariate animazioni comprese in Animate.css è sufficiente visitare la home page del progetto, scorrere la lista delle animazioni dal menu a tendina e testarle dal vivo cliccando sul pulsante 'Animate it'. I nomi delle varie animazioni corrispondono ai nomi delle classi da applicare agli elementi da animare.
Dunque, una volta scaricato dalla pagina del progetto su GitHub il pacchetto con la libreria, ci ritroveremo con due file essenziali: il foglio di stile animate.css e lo script jack-in-the-box.js. Insieme a jQuery sono le basi del nostro esempio, i file da incorporare nel documento per applicare le animazioni agli elementi che preferiamo.
Uno sguardo alla demo
Come spesso accade, anche in questo caso è più facile far parlare gli esempi. Partiamo allora da una versione statica della nostra demo. Una paginetta tirata su velocemente con Bootstrap, una serie di box con dei titoli descrittivi ad accompagnarli.
Gli elementi che ci interessa animare sono appunti i testi che accompagnano i vari box e i titoli delle intestazioni delle diverse sezioni.
Per prima cosa, volendo dare vita alla nostra pagina statica (esempio 'animato'), colleghiamo al documento il foglio di stile animate.css:
<link rel="stylesheet" href="css/animate.css">Prima della chiusura del tag body inseriamo il riferimento a jQuery e allo script Jack In The Box:
<script src="js/jquery.js"></script>
<script src="js/jack-in-the-box.js"></script>Procediamo quindi a inizializzare lo script con questa semplice istruzione:
<script>
$(function() {
$('body').jackInTheBox();
});
</script>L'unica cosa da evidenziare è l'uso del selettore body. Si può scegliere di usare un qualunque selettore che faccia riferimento alla sezione della pagina che scorre e che contiene gli elementi da animare, nel nostro caso abbiamo scelto direttamemente il body della pagina.
A questo punto dobbiamo rintracciare nel codice HTML gli elementi da animare e applicare a questi ultimi delle classi che fanno riferimento alle animazioni di Animate.css e la classe speciale box.
Per esempio, il titolo h1 iniziale, quello sullo sfondo con la foto, lo abbiamo così definito:
<h1 class="box bounceIn">Lorem ipsum</h1>All'apertura della pagina, dato che il titolo è in primo piano e visibile nella viewport, apparirà con un'animazione in entrata da piccolo a grande con un tipico effetto rimbalzo (bounce).
Per il paragrafo che accompagna il titolo, invece, abbiamo scelto un'animazione a comparsa da destra con effetto fade:
<p class="box fadeInRightBig">Anche questa animazione sarà attivata al caricamento della pagina perché il paragrafo è immediatamente in vista nella viewport. Per tutte le altre animazioni, l'attivazione, come si vede nella demo, sarà sincronizzata con lo scrolling della pagina. Rimandiamo al codice dell'esempio per verificare che tipo di animazione è stata applicata agli altri titoli. Basterà per riassumere ricordare come si creano le animazioni: sull'elemento da animare si applica la classe box e una classe corrispondente alle animazioni di Animate.css. Le animazioni vengono attivate una sola volta, pertanto per rivederle in azione è necessario fare il refresh della pagina.
Quanto alla compatibilità cross-browser, la tecnica funziona su tutti i browser che supportano le animazioni e le transizioni CSS. Le animazioni sono invece disabilitate sui dispositivi mobili.
Prima di chiudere, un link ad un altro esempio realizzato con la libreria. Nel pacchetto zip allegato, oltre alle demo, è disponibile una copia della libreria prelevata da GitHub.
