10 incredibili esempi di animazioni CSS3 innovative
CSS3 ha creato una serie di nuove funzionalità esteticamente impressionanti. Forse il più divertente di questi con cui giocare è l'animazione CSS, che ti 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, soprattutto, più nerd dell'animazione CSS sul web. Inizio!
Avvertenza: queste animazioni sono piuttosto specifiche per browser, quindi se stai navigando in IE6, è tempo di smettere di guardare Saved By The Bell, abbandonare la connessione remota e scaricare un browser moderno.
Polaroid rotanti
Questo tutorial ti mostra come creare una straordinaria pila animata di fotografie utilizzando una tonnellata di nuovi comandi CSS3. Siamo partiti alla grande, questo sarà difficile da battere.
Fai clic per visualizzare la demo
La matrice
Segui il coniglio bianco .. err, voglio dire, dai un'occhiata a questa fantastica animazione di 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 rimarrà lì per un po 'fino a quando non si trova un degno concorrente.
Fai clic per visualizzare la demo
Trippy Spinning Colonna del divertimento
Questa pazza animazione presenta una colonna rotante composta da file rotanti di caselle colorate e testo. L'effetto complessivo è pazzesco e innegabilmente vertiginoso. Questo è un po 'troppo scoppiato per rubare il tuono da The Matrix, il campione rimane.
Suggerimento: per una maggiore possibilità di cinetosi, scorrere su e giù e scuotere la testa avanti e indietro mentre si guarda l'animazione (non siamo in alcun modo responsabili per qualsiasi hardware rovinato che possiedi dopo aver gettato il tuo pranzo sulla scrivania).
Fai clic per visualizzare la demo
DJ Hero
Questo tutorial combina CSS3 e jQuery per creare record di spinning. Utilizzando i controlli su schermo, è possibile controllare la velocità dei record o semplicemente afferrare un record con il mouse per eliminare alcuni graffi rigidi.
Giradischi virtuali su uno sfondo di legno vintage? Questo potrebbe essere un concorrente piuttosto importante, questo dibattito si sta riscaldando. Vai avanti, fai clic. Sai che vuoi giocare.
Fai clic per visualizzare 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 ho capito che potresti tenere premuti i tasti freccia per farlo impazzire ed entrare in modalità di morte con turbo spinning, che ovviamente lo ha riscattato un po '. Mega punti stile per l'inclusione di Sonic The Hedgehog.
Fai clic per visualizzare la demo
Razzo
Una nave spaziale senza dubbio portata a voi dalle meraviglie di MS-Paint vola attraverso il cielo con una velocità mozzafiato. Una specie di ... In realtà è una specie di galleggiante lungo, trasportato da uno strano campo di forza rettangolare con linee tratteggiate. Circa a metà dell'animazione il razzo scompare praticamente senza una ragione apparente, quindi è ovviamente un razzo stealth high-tech top-secret con un dispositivo di occultamento armato per respingere i cacciatorpediniere vulcaniani invasori.
Non esattamente un serio concorrente. In effetti, perché ti ho persino mostrato questo? E ancora più pertinente, esiste qualcosa come un cacciatorpediniere vulcaniano o l'ho appena inventato?
Fai clic per visualizzare la demo
Tempo metereologico
Neve
Le foglie
Facciamo cadere tutte le cose meteorologiche in una volta sola, vero? Dove c'è un'animazione di cattivo gusto, c'è anche l'inevitabile neve che cade, foglie, pioggia, ecc. Non fraintendetemi, sono piuttosto belli e potrebbero portare ad alcune modifiche del sito Web stagionali davvero eccellenti. Tuttavia, queste esecuzioni particolari, sebbene ben realizzate, non sono così creative con il contesto. Fammi sapere se crei un sito Web con grandinate giganti che distruggono tutto il contenuto della pagina, ora sarebbe qualcosa.
Fai clic per visualizzare la demo neve
Fai clic per visualizzare la demo di Leaves
Cover Flow
Questa animazione imita il flusso di cover di Apple usando una tecnica ibrida CSS / jQuery come nell'esempio DJ Hero sopra. Imitando Apple questo si comporta bene sia nelle categorie cool che in quelle nerd e fa anche un ottimo lavoro per essere innovativo (questo è l'unico falso CSS3 Cover Flow che ho trovato). Abbiamo ancora un altro contendente tra le mani.
Fai clic per visualizzare la demo
Star Wars Crawl
Questo è tutto, game over. Vorrei ringraziare gli altri partecipanti per aver giocato, ma questo prende il premio. È la scena iniziale di Star Wars per il fatto di gridare a squarciagola ... in HTML e CSS (è un testo dal vivo che stai guardando sciocco). Ti chiedo, quale miglior uso dell'animazione CSS potrebbe esserci? Sottolineo che non ce n'è. Fidati di me, mostralo al tuo amico più nerd e si trasformerà magicamente in un bambino di 4 anni la mattina di Natale.
Fai clic sulla demo di Epic View
(Safari + Snow Leopard richiesto)
Conclusione
Per quelli di voi che pensano che questo concorso sia stato truccato, avete ragione. Ho inventato l'idea del concorso dopo aver trovato l'esempio di Star Wars solo per evidenziare quanto tutto il resto impallidiva al confronto. Il vero intento di questo articolo è di mostrarti che non c'è fine alle cose interessanti che puoi costruire con le funzionalità di animazione relativamente semplici integrate in CSS3.
Usa i commenti qui sotto per farci sapere quale era il tuo preferito. Inoltre, se conosci altri esempi, condividili!
