Guida
Cos'è un sito animato in 3D
Come un'animazione 3D segue lo scorrimento della pagina, perché resta veloce e leggibile da Google, e quando conviene.
Un sito animato in 3D racconta l'impresa con un'animazione che si muove solo quando si scorre la pagina. Questa guida spiega come funziona, quanto costa e quando conviene, con gli esempi dei siti che abbiamo costruito.
Cos'è un sito animato in 3D
Un sito animato in 3D è un sito in cui lo scorrimento della pagina guida un'animazione: chi legge decide il ritmo.
Nei nostri siti le animazioni sono due. La prima parte da sola quando la pagina si apre. La seconda, lunga da venti a trenta secondi, sta più in basso e avanza fotogramma per fotogramma mentre si scorre, con il testo di ogni capitolo che compare accanto.
Chi visita legge cosa fa l'impresa mentre lo vede succedere: una casa ricostruita stanza per stanza, una Vespa che gira in un vicolo, il gelato mantecato.
Come l'animazione 3D segue lo scorrimento
L'animazione è una sequenza di fotogrammi disegnati su una tela, e la posizione della pagina sceglie quale fotogramma mostrare.
- Produciamo una sequenza 3D da venti a trenta secondi per l'impresa, poi la dividiamo in 600 fino a 1.800 fotogrammi, fino a sessanta al secondo.
- I fotogrammi si preparano in tre o quattro misure, da un taglio verticale per il telefono ai 1920 pixel degli schermi grandi.
- Il browser riceve la misura giusta per lo schermo, a pacchi che arrivano nell'ordine in cui servono, oppure come un flusso video decodificato sul dispositivo.
- Ogni fotogramma avanza dopo circa dieci pixel di scorrimento: il movimento resta fluido e non va a scatti.
Nella home di Cengel Holding la sequenza ha 957 fotogrammi in quattro misure; in questo sito ne ha 1.800. Sul telefono la versione video della nostra sequenza pesa 17 MB invece dei 58 delle immagini separate.
Animazione allo scorrimento, effetto parallasse, video di sfondo e WebGL
L'animazione 3D allo scorrimento è l'unica delle quattro tecniche in cui chi legge comanda una vera sequenza 3D.
| Tecnica | Cosa si muove | Chi decide il ritmo | Adatta a |
|---|---|---|---|
| Sequenza 3D allo scorrimento | Un'animazione 3D intera, fotogramma per fotogramma | Chi legge, scorrendo | Prodotti, luoghi e lavorazioni da mostrare |
| Effetto parallasse | Livelli che scorrono a velocità diverse | Chi legge, ma l'immagine resta piatta | Un po' di profondità su pagine semplici |
| Video di sfondo | Una clip che si ripete | Nessuno: va da sola | Atmosfera, senza racconto |
| WebGL in tempo reale (Three.js) | Un modello 3D disegnato dal vivo | Chi legge, trascinando o scorrendo | Configuratori e modelli tecnici, a un costo molto più alto |
Google legge un sito animato?
Sì, se il testo sta nella pagina e non dentro l'animazione.
- Ogni titolo, paragrafo e didascalia è testo HTML vero, che i motori di ricerca e gli assistenti AI possono leggere e citare.
- La pagina è completa anche senza JavaScript: un'immagine ferma sostituisce l'animazione.
- Ogni pagina ha il suo titolo, la sua descrizione, i dati strutturati e l'immagine per la condivisione.
- L'animazione comincia a scaricarsi dopo il primo gesto, quindi non ritarda mai la comparsa della pagina.
Un sito animato è lento?
No, se i fotogrammi arrivano nell'ordine giusto e nella misura giusta.
Prima arrivano il testo e la prima immagine. L'animazione segue a pacchi, il primo da solo, e il telefono non scarica mai le misure pensate per gli schermi grandi. Caratteri, stili e script sono compressi e restano in memoria per un anno, e ogni immagine è ritagliata nella forma in cui si vede.
Quando conviene un sito animato in 3D
Conviene quando l'impresa ha qualcosa che vale la pena mostrare in movimento: un prodotto, un luogo o una lavorazione.
- Prodotti con un gesto: gelato, pasta fresca, profumi, occhiali, ricambi per moto.
- Luoghi: hotel, relais, case vacanze, ville, un lago o una costa.
- Lavorazioni: una ristrutturazione, un progetto di architettura, un ascensore montato, un giardino che prende forma.
- Tecnologia: motori, droni, barche, piattaforme difficili da spiegare con le fotografie.
Serve meno per le pagine che vanno solo lette in fretta, come un avviso o un listino: per questo l'animazione è una sezione del sito e non tutto il sito.
Esempi di siti animati in 3D che abbiamo costruito
Ogni sito qui sotto ha la sua animazione 3D, fatta per quell'impresa.
- Cengel Holding: una casa a schiera di Londra riportata al mattone e ricostruita stanza per stanza.
- Tunnel Verde: una Vespa verde che gira in un vicolo di Roma, per un marketplace di Vespe verificate.
- Tatino: il gelato mantecato e i dolci delle feste, per una gelateria vicino a Roma.
- Sandro Laffranchini: un violoncello in un teatro vuoto, per il primo violoncello della Scala.
- Simet e Delta: un ascensore costruito pezzo per pezzo, per due aziende di ascensori.
- RacingSyn: un'auto da corsa scomposta a mezz'aria, per un'alleanza di ingegneria del motorsport.
Cosa determina il costo di un sito animato in 3D
Il prezzo dipende dalle pagine, dalle lingue e dalle parti interattive, e ogni proposta elenca ogni voce con il suo prezzo prima della firma.
Altrove una sola sezione animata si costruisce spesso a mano in un programma 3D o in WebGL. Noi produciamo la sequenza per ogni impresa e la facciamo girare su un motore già provato, così l'animazione fa parte del sito e non è un progetto a parte.
Come ne realizziamo uno
Una chiamata, la demo della tua home prima di firmare, una proposta chiara, circa cinque settimane di lavoro, poi il sito seguito ogni mese.
(Domande)
Risposte brevi
Cos'è un sito animato allo scorrimento?
È un sito in cui lo scorrimento della pagina fa avanzare un'animazione, così chi legge decide il ritmo di quello che succede sullo schermo.
Un sito animato va bene per la SEO?
Sì, se il testo è HTML vero accanto all'animazione. I motori di ricerca leggono le parole, e l'animazione tiene le persone più a lungo sulla pagina.
Funziona sul telefono?
Sì. Il telefono riceve un taglio verticale dell'animazione nella misura giusta, e il movimento segue il pollice.