La stagione delle vacanze è al culmine e per alcune persone fortunate con climi appropriati, l'inverno è in pieno fermento. Vivo a Phoenix, quindi il vero inverno, e di conseguenza la neve, è davvero solo un sogno lontano. Quindi sono costretto a rivolgermi a Nerdery per ottenere la mia correzione!
Oggi esamineremo una tecnica CSS super semplice che puoi usare per far nevicare sul tuo sito web. Ci vorranno solo pochi minuti al massimo e sarà un'ottima introduzione all'uso di più immagini di sfondo e animazioni di fotogrammi chiave in CSS.
Webkit FTW
Per mantenere le cose semplici, inizierò tutto questo codice usando il -webkit prefisso del venditore. Ciò manterrà il nostro codice più pulito e più facile da leggere man mano che apprendiamo. Il motivo per cui ho scelto Webkit è semplice: il supporto per l'animazione dei fotogrammi chiave CSS è molto efficace. Persino Firefox, che ha recentemente aggiunto il supporto per i keyframe, in realtà non lo farà quasi come Safari.
Successivamente, discuteremo su come inserire gli altri prefissi del fornitore e quale tipo di esperienza ci si può aspettare su ciascun browser. In definitiva, se cerchi davvero un effetto supportato che funzioni su quanti più browser possibile, ti consiglio di cercare un plugin snow di jQuery. Tuttavia, se sei alla ricerca di una divertente esperienza di apprendimento CSS, continua a leggere!
Per iniziare: abbiamo tre PNG
La configurazione di questo progetto è costituita da tre immagini di sfondo innevate. Puoi aggiungerne di più, se preferisci, ma ne useremo tre per mantenere le cose belle e semplici. Fondamentalmente, tutto ciò di cui hai bisogno sono tre file PNG in background trasparenti di varie dimensioni con piccoli puntini bianchi casuali su di essi.
Ecco il mio processo per configurarli. Per prima cosa, ho creato un'immagine quadrata di 500 px e ho utilizzato un pennello piccolo a piena durezza. È possibile impostare un pennello scatter, se lo si desidera, ma mi piace il controllo del posizionamento manuale dei punti sulla tela. Quindi, per assicurarmi che fosse ben affilato, sono passato a Filtro> Altro> Offset.
Da quando ho iniziato con un'immagine quadrata di 500px, ho intenzione di tagliarlo a metà e spostarlo di 250px sia orizzontalmente che verticalmente.
Dopo aver eseguito questo comando, potresti avere alcuni punti disordinati vicino al centro, questi dovrebbero essere facili da pulire con un po 'di cancellazione. La parte importante è che i bordi si avvolgono bene in modo che la parte centrale dell'immagine possa essere cambiata come vuoi.
Ora salva il tuo PNG e ripeti l'intero processo per un'immagine quadrata di 400 px e un'immagine quadrata di 300 px. Per questi ultimi due, ho reso i fiocchi di neve un po 'più sfocati e ridotto un po' l'opacità.
Applicazione degli sfondi
Ora applicheremo queste immagini al nostro background in CSS. Li sto lanciando usando il selettore del corpo, ma sentitevi liberi di applicarli a qualcosa di più specifico.
L'implementazione di più sfondi è esattamente come applicare solo uno sfondo, l'unica differenza è che si inserisce una virgola dopo il primo URL dell'immagine e si aggiunge un altro. Ecco come sarà il nostro codice, tieni presente che le immagini di sfondo verranno tutte ripetute per impostazione predefinita.
Gli sfondi multipli hanno un grande supporto su tutta la linea, l'unica cosa reale di cui ti devi preoccupare è, hai indovinato, le versioni precedenti di IE. Come per qualsiasi altra cosa nel CSS avanzato, più sfondi sono supportati in IE9, ma niente di più vecchio di quello. Speriamo che il nuovo programma di aggiornamento automatico di IE metterà fine a questi tipi di guai!
Impostazione dei fotogrammi chiave
In passato, abbiamo progettato alcune animazioni keyframe decentemente complesse su Design Shack, ma questa volta possiamo rimanere molto semplici.
Nonostante il fatto che mi riferisca a questo come "semplice"? in questa sintassi c'è sicuramente molto da fare, quindi scomporlo pezzo per pezzo. Ciò che sta facendo è creare un'animazione che possiamo quindi chiamare in azione altrove nel nostro CSS. La sintassi di base è? @Keyframes? ma qui stiamo implementando la versione Webkit quindi abbiamo usato? @ - webkit-keyframes ?. La neve? parte è il nome che ho scelto per l'animazione. Hai una certa libertà qui, ma prova a scegliere qualcosa di descrittivo e utile.
Quindi iniziamo due frame. Il primo è come apparirà la nostra pagina all'inizio della nostra animazione, la seconda è come apparirà alla fine. All'inizio, ho collocato tutte le nostre immagini di sfondo in alto a sinistra usando 0px 0px.? Alla fine, ho spostato ogni immagine in una nuova posizione. Proprio come quando posizioniamo ogni immagine, separeremo ogni set di valori di posizione con una virgola.
La logica di posizione
La posizione di ciascuna immagine alla fine dell'animazione può sembrare arbitraria, ma in realtà è molto intenzionale. Per far sì che l'animazione funzioni correttamente, devi capire alcune cose.
? Una volta che una singola istanza di un'animazione ha fatto il suo corso, ricomincia da capo. Se non posizioni correttamente le tue immagini, vedrai un blip a questo punto.Il motivo per cui utilizziamo le animazioni dei fotogrammi chiave invece della proprietà di transizione più semplice e meglio supportata è che possiamo creare un'animazione del fotogramma chiave senza interruzioni in modo che continui a nevicare indefinitamente. Con questo in mente, devi ricordare che una volta che una singola istanza di un'animazione ha fatto il suo corso, ricomincerà da capo. Se non posizioni correttamente le tue immagini, vedrai un blip a questo punto.
Il trucco consiste nell'utilizzare la dimensione delle immagini per assicurarsi che il fotogramma finale corrisponda al fotogramma iniziale, creando così una transizione senza interruzioni.Ad esempio, la mia seconda immagine di sfondo era 400 px per 400 px, quindi ho spostato lo sfondo di 400 px durante il corso dell'animazione, lo stesso per la mia terza immagine a 300 px. Per la mia prima immagine ho fatto qualcosa di leggermente diverso. Volevo che si muovesse più velocemente, quindi ho raddoppiato l'altezza e spostato di 1.000 pixel. Poiché questo è un multiplo dell'altezza, l'ultimo fotogramma corrisponderà ancora al primo.
Notare anche che ho spostato la posizione orizzontale delle immagini. Questo aggiunge un po 'di vento nell'equazione, quindi la neve non sta cadendo perfettamente in verticale. Se vuoi che la neve oscilli avanti e indietro mentre cade, aggiungi semplicemente qualche altro fotogramma.
Implementare l'animazione
Il nostro ultimo passo è tornare al selettore del corpo e lanciare l'animazione? -Webkit? per creare un'istanza dell'animazione. Prima stabiliamo il nome dell'animazione che vogliamo usare, in questo caso la neve? quindi stabiliamo la durata dell'animazione (20 secondi), quindi scegliamo una funzione di temporizzazione (lineare) e infine eseguiamo il ciclo dell'animazione all'infinito.
Con questo, il tuo sito web dovrebbe nevicare come un matto in Safari! Diamo un'occhiata ad espandere un po 'questo.
Altri prefissi del browser
Ora per aggiungere più supporto per il browser. La nostra sezione di configurazione dei fotogrammi chiave dovrebbe essere ampliata come segue. Ho iniziato con la sintassi base senza prefisso del browser, quindi ho usato i prefissi per Mozilla, Webkit e Microsoft.
Quindi facciamo lo stesso per gli stili nel corpo. Tutti i vari browser usano la stessa sintassi, solo il prefisso cambia.
Nota che il supporto di IE qui è puramente per il futuro. Solo IE 10 supporta le animazioni dei fotogrammi chiave ed è ancora in fase di sviluppo.
?Non così in fretta? dice Firefox
A questo punto volevo fare tutto con il tutorial, ma ahimè, ho aperto Firefox e ho trovato un problema: nessuna animazione! Dopo alcuni scavi, è emerso che il problema è nell'implementazione di background multipli.
Il problema è strano. Firefox supporta più immagini di sfondo e supporta animazioni di fotogrammi chiave. Supporta anche animazioni che utilizzano più immagini di sfondo! Tuttavia, per qualche motivo non sembra supportare lo spostamento indipendente della posizione di ciascuna immagine di sfondo durante un'animazione di fotogrammi chiave.
Aggiornare
Ottime notizie, il commentatore Patric ha risolto il nostro piccolo problema di Firefox! Si scopre che il mio amore per la stenografia mi ha messo nei guai qui. Firefox funziona perfettamente se si elencano tutti i valori nella riga iniziale. Ecco il codice del keyframe aggiornato:
Guardalo in azione
demo: Clicca qui per il lancio
Conclusione
Per riassumere, creare una pura animazione CSS in loop che funzioni nei browser moderni è un gioco da ragazzi. Qualche minuto di Photoshop e un paio di semplici linee di codice e hai il Polo Nord. IE non supporterà animazioni di fotogrammi chiave fino alla versione 10, Opera ha attualmente zero supporto e Firefox ha il supporto, ma non è così esteso come quello che troverete in Webkit.
Questo progetto illustra perfettamente il motivo per cui è importante giocare con questa roba prima che sia pronta per essere implementata nel mondo reale. Non avevo idea che Firefox avrebbe gettato una chiave inglese nella mia piccola animazione finché non mi sono sporcato le mani con un esperimento. Ora mi trovo molto più istruito sulla sintassi necessaria per le animazioni CSS da browser a browser.