Le animazioni CSS a più fasi sono facili con i fotogrammi chiave, ma cosa succede se vogliamo utilizzare semplici transizioni vecchie per ottenere un effetto simile? Inoltre, come prendiamo un singolo evento hover e lo traduciamo in più animazioni su diversi elementi?
La risposta sta nell'usare aloni sepolti, un trucco semplice ed efficace che dovresti assolutamente provare.
Ispirato dagli eventi reali
Chris Coyier di CSS-Tricks serve più frequentemente come ispirazione per i miei articoli di qualsiasi altro autore. L'uomo sa un sacco di CSS e imparo sempre molto dai suoi articoli.
Recentemente, ha pubblicato un pezzo su CSS che di solito confonde i principianti e in esso ha brevemente spiegato ciò che ha definito "aleggiamenti sepolti". Onestamente, non avevo mai veramente pensato di utilizzare un effetto hover come prima ed ero impaziente di esplorare le implicazioni. Quello che segue è il risultato di questa esplorazione.
Cos'è un Hover sepolto?
Il concetto dietro un hover sepolto è abbastanza semplice. L'idea generale è che in genere cambiamo l'oggetto al passaggio del mouse. Ecco un esempio:
Qui abbiamo un semplice link che cambia colore al passaggio del mouse. Tuttavia, si scopre che non dobbiamo necessariamente cambiare l'oggetto su cui stiamo sorvolando, ma in effetti possiamo scegliere di cambiare uno dei suoi discendenti. Vediamo come appare:
Qui la dichiarazione sembra quasi la stessa ma ha un effetto drammaticamente diverso. Quando il mouse dell'utente entra ovunque nel contenitore genitore, tutti i collegamenti all'interno di quel contenitore cambiano immediatamente colore.
È importante notare che IE6 non supporta gli hover non link. È anche importante notare che IE6 è una scusa sporca e inutile per un browser in questi giorni e non mi riguarda molto per quanto riguarda l'insegnamento.
Simulazione di un'animazione di fotogrammi chiave
Ora, rendendosi conto che quanto sopra era possibile, il mio cervello ha immediatamente iniziato verso l'implementazione più complicata di questo scenario che ho potuto inventare.
Casi d'uso semplici per questo metodo sono pratici, ma probabilmente puoi inventarli tu stesso. Invece volevo fare qualcosa di divertente. Il risultato è abbastanza poco pratico e non ha il miglior supporto per i browser, ma soddisfa l'obiettivo di farti davvero pensare a applicare creativamente i voli al coperto.
L'idea di base che mi è venuta in mente è la simulazione di a webkit-keyframe-animazione con un semplice CSS3 basato sulla transizione, che ha un supporto molto migliore. Il risultato sarà un'animazione complessa e multi-passo che viene attivata da un evento di hover. Perché? Perché qui siamo tutti nerd e sarà divertente da costruire, ecco perché.
Introduzione: l'HTML
Non abbiamo quasi bisogno di HTML per questo progetto. Tutto ciò che ho fatto è stato creare un contenitore con un'intestazione e alcuni paragrafi. Il nostro obiettivo sarà innescare diverse animazioni quando l'utente si posiziona sopra il div.
CSS di base
Questi stili sono per lo più arbitrari e possono essere modificati a piacere. Ho impostato una bella grafica di sfondo scuro, creato una finestra visibile e definito lo stile del testo.
A questo punto, l'anteprima dal vivo assomiglia all'immagine qui sotto. Come puoi vedere, il nostro testo sta traboccando dalla scatola ma è tutto a posto, visto che lo cambieremo in un minuto.
Disegnare l'intestazione e i paragrafi
Ecco la struttura di base della nostra animazione: l'intestazione si trova solo verticalmente centrata nel contenitore. Al passaggio del mouse, l'intestazione scompare e i paragrafi si attenuano uno alla volta.
Per far sì che ciò accada, dobbiamo prima posizionare l'header assolutamente. Questo ci permetterà di inserire l'intestazione dove vogliamo senza che ciò influisca sui tre paragrafi sottostanti.
Si noti che impostando l'altezza della linea uguale all'altezza del contenitore centra l'intestazione verticalmente all'interno del div.
Quindi vogliamo nascondere i nostri paragrafi dalla vista. Li sbiadiremo dall'invisibile al visibile, quindi ho usato la proprietà di opacità per realizzare questo.
Il risultato dovrebbe essere qualcosa di simile a quello mostrato di seguito, con solo l'intestazione visibile all'interno del contenitore a questo punto.
Definire le animazioni
Ora che abbiamo tutto allineato oltre a far quadrare i nostri stati di visibilità, è tempo di finire facendo funzionare le animazioni.
Inizieremo definendo la nostra transizione dell'intestazione utilizzando i vari prefissi del browser. Successivamente, usiamo il nostro primo hover sepolto! Di nuovo, l'idea è che quando il contenitore è sospeso sopra, le animazioni iniziano. Con questo in mente, usiamo contenitore: hover h2 per creare un evento che si applica solo alla nostra intestazione.
Una volta individuata la nostra intestazione, l'abbiamo ripresa e la sua opacità si riduce a zero.
Animare i paragrafi
Ecco la parte difficile.Abbiamo tre diversi paragrafi e vogliamo sfumarli uno alla volta. Quello che dobbiamo fare è prendere di mira ciascuno individualmente e sfumare a velocità diverse.
Dal momento che non abbiamo fornito a nessuno dei paragrafi un ID o una classe speciali, li useremo nth-child per afferrare ciascuno di loro individualmente. Dal momento che le animazioni non sono supportate da IE in ogni caso, questo non sarà un problema.
Le lunghezze specifiche delle animazioni sono un po 'strane. Ho praticamente dovuto smanettare con il modo in cui l'intestazione svaniva e questi si dissolvevano fino a trovare qualcosa che mi piacesse. Questi numeri sembrano funzionare bene:
Quando l'utente si posiziona sopra il contenitore, vogliamo che i paragrafi vengano visualizzati, quindi il passaggio finale consiste nell'utilizzare un altro hover sepolto per individuare i tag di paragrafo. Noi usiamo .container: hover p per indirizzare i paragrafi al passaggio del mouse e aumentare la loro opacità. Le animazioni che impostiamo nel passaggio precedente causeranno una transizione graduale e graduale.
Una cosa bella di tutte queste animazioni è che sembrano altrettanto buone al contrario quando togli il tuo mouse dal div. I paragrafi si attenuano e l'intestazione torna indietro. Abbastanza pulito!
Guarda
La demo dal vivo è un po 'più complicata ma usa la stessa tecnica dell'esempio sopra. Scusate gli utenti di Internet Explorer, come sempre, non è divertente per voi.
Dimostrazione dal vivo: Clicca qui per il lancio.
Conclusione
Con l'aiuto di aloni nascosti, possiamo ottenere un sacco di tecniche CSS davvero interessanti e uniche con cui potresti aver avuto difficoltà. In questo articolo è stato utilizzato un hover nascosto per attivare più animazioni CSS su diversi elementi per mostrare la complessità degli effetti che è possibile implementare.
Lascia un commento qui sotto e facci sapere come e se usi il volo al coperto.