C’era una volta, in un web lontano lontano, la tecnologia Flash di Adobe, e chi voleva pubblicare in rete una animazione prendeva quella strada nella certezza che alternative praticamente non ce n’erano.
Nel 2010 il compianto Steve Jobs piantò un paletto di frassino nel cuore di Flash, proprio quando i browser di nuova generazione prendevano piede. Al web designer si aprivano due strade: disegnare un elemento e poi scrivere un programma in JavaScript per animarlo; oppure usare le transizioni CSS. Se vi prendete cinque minuti per guardare le due dimostrazioni vecchiotte i cui link ho appena usato noterete che i risultati sono piuttosto simili. Col tempo, naturalmente, i web designer più bravi sono riusciti a fare anche cose più spettacolari, pur sempre partendo dalle stesse funzionalità di base.
Per anni ci siamo detti che le animazioni JavaScript sono più lente e quelle CSS più veloci, che le prime richiedono un programmatore e le seconde un grafico, che le prime sono più flessibili e le seconde più semplici da creare. Queste affermazioni avevano un fondo di verità all’inizio, molto meno adesso, perché è salito il livello medio dei professionisti nel campo e per via del progresso generale: oggi JavaScript è molto veloce e le animazioni CSS sfruttano la scheda grafica del PC.
I più pigri hanno montato video sullo sfondo delle pagine web, i più bravi hanno imparato a mettere foto e sopra alle foto effetti speciali realizzati con una delle due tecniche citate, che le trasformano in video per solo un millesimo del peso. Se avete un minuto, guardate la demo dell’effetto aria calda sviluppato dal designer Lucas Bebber.
Quelli veramente bravi hanno sviluppato librerie JavaScript utilizzabili da tutti, come GSAP, che vedete dimostrata qui sotto. Fate clic sul pulsante toggle mouse controls per prendere il controllo del castello col mouse.
Visitate Howl’s Moving Castle di Nathan Gordon su CodePen per vedere il codice sorgente.
E se non sapete proprio programmare, neppure una sola riga? Consolatevi guardando il cartone animato, è splendido.