CSS3 ha portato un certo numero di nuove caratteristiche esteticamente impressionanti. Forse il più divertente di questi con cui giocare è l'animazione CSS, che consente di eseguire molte funzioni basate sul movimento normalmente delegate a JavaScript. Unisciti a me nella mia epica ricerca per scoprire l'uso più cool, più innovativo e, ancor più importante, più nerd dell'animazione CSS sul web. Inizio!
Attenzione: queste animazioni sono piuttosto specifiche del browser, quindi se stai navigando su IE6, è ora di smettere di guardare Saved By The Bell, abbandonare la connessione dial-up e scaricare un browser moderno.
Polaroid rotanti
Questo tutorial ti mostra come creare un mucchio di fotografie incredibili e animate utilizzando una tonnellata di nuovi comandi CSS3. Siamo partiti bene, questo sarà difficile da battere.
Clicca per vedere la demo
La matrice
Segui il coniglio bianco? err voglio dire, controlla questa fantastica animazione Matrix. Non del tutto fedele al film (i singoli personaggi non cambiano), ma comunque impressionante. Visto che The Matrix è uno dei migliori film di fantascienza di tutti i tempi (sto parlando del primo film, non di quegli altri due disastri), questo salterà in cima alla nostra lista e senza dubbio resterà lì per un po 'finché un degno concorrente può essere trovato.
Clicca per vedere la demo
Trippy Spinning Column of Fun
Questa pazza animazione presenta una colonna rotante composta da file rotanti di caselle colorate e testo. L'effetto complessivo è pazzesco e indiscutibilmente vertiginoso. Anche se questo è un po 'troppo spaccato per rubare il tuono da The Matrix, il campione rimane.
Suggerimento: per una maggiore possibilità di chinetosi, scorri verso l'alto e verso il basso e scuoti la testa avanti e indietro mentre guardi l'animazione (non siamo in alcun modo responsabili dell'hardware rovinato che possiedi dopo aver gettato il tuo pranzo sulla tua scrivania).
Clicca per vedere la demo
DJ Hero
Questo tutorial combina CSS3 e jQuery per creare record di spinning. Usando i controlli su schermo, puoi controllare la velocità dei record o semplicemente prendere un disco con il tuo mouse per deporre alcuni graffi.
Giradischi virtuali su uno sfondo di legno vintage? Questo potrebbe essere un popolo piuttosto importante, questo dibattito si sta scaldando. Vai avanti, cliccaci sopra. Sai che vuoi giocare.
Clicca per vedere la demo
Cubo animato 3D
Questo ti permette di usare i tasti freccia per controllare la rotazione di un cubo 3D. All'inizio ho pensato che fosse piuttosto zoppo ma poi mi sono reso conto che potevi tenere premuti i tasti freccia per farla diventare pazza e andare in modalità death spin turbo, che ovviamente l'ha riscattata un po '. Punti stile Mega per includere anche Sonic The Hedgehog.
Clicca per vedere la demo
Razzo
Una nave missilistica senza dubbio portata dalle meraviglie di MS-Paint vola in cielo con una velocità incredibile. Una specie di? In realtà è come una specie di fluttuante, trasportato da uno strano campo di forza rettangolare con linee tratteggiate. Circa a metà dell'animazione, il razzo praticamente scompare senza una ragione apparente, quindi è ovviamente un razzo segreto ad alta tecnologia top-secret con un dispositivo di occultamento armato per scongiurare l'invasione dei cacciatorpediniere di Vulcano.
Non esattamente un serio concorrente. Infatti, perché ti ho mai mostrato questo? E ancora più pertinente, c'è una cosa come un cacciatorpediniere Vulcaniano o l'ho appena inventato?
Clicca per vedere la demo
Tempo metereologico
La neve
Le foglie
Dobbiamo buttare fuori tutto il tempo in un colpo solo? Dove c'è un'animazione animalesca, c'è anche l'inevitabile neve che cade, foglie, pioggia, ecc. Non fraintendetemi, questi sono piuttosto interessanti e potrebbero portare ad alcune modifiche stagionali del sito davvero eccellenti. Tuttavia, queste esecuzioni particolari, benché ben fatte, non sono così creative con il contesto. Fammi sapere se crei un sito web che ha grandine gigantesche che distruggono tutto il contenuto della pagina, ora sarebbe qualcosa.
Clicca per visualizzare Snow Demo
Clicca per vedere le foglie Demo
Cover Flow
Questa animazione riproduce il flusso di copertura di Apple utilizzando una tecnica ibrida CSS / jQuery come nell'esempio di DJ Hero sopra. Imitando Apple, questo si comporta bene sia nelle categorie cool che nerd e fa anche un bell'addio all'innovazione (questo è l'unico falso CSS3 Cover Flow che ho trovato). Abbiamo ancora un altro concorrente nelle nostre mani.
Clicca per vedere la demo
Scansione di Star Wars
Questo è tutto, game over. Vorrei ringraziare gli altri partecipanti per il gioco, ma questo prende il premio. È la scena di apertura di Star Wars per aver gridato forte? in HTML e CSS (è il testo live che stai guardando in modo sciocco). Ti chiedo, quale migliore utilizzo dell'animazione CSS potrebbe esserci? Sottoscrivo che non ce n'è. Fidati di me, mostra questo al tuo amico più cattivo e si trasformerà magicamente in un bambino di 4 anni la mattina di Natale.
Fai clic per la demo di Epic View
(Safari + Snow Leopard richiesto)
Conclusione
Per quelli di voi che pensano che questa competizione sia stata truccata, avete ragione. Ho inventato l'idea del concorso dopo aver trovato l'esempio di Star Wars solo per evidenziare quanto tutto il resto fosse impallidito dal confronto. Il vero scopo dell'articolo è di mostrarti che non c'è fine alle cose interessanti che puoi costruire con le caratteristiche di animazione relativamente semplici integrate nel CSS3.
Usa i commenti qui sotto per farci sapere quale era il tuo preferito. Inoltre, se conosci altri esempi, ti preghiamo di condividerli!