Oggi ci divertiremo tutti con la funzione CSS per sfondi multipli. Imparerai come utilizzare più sfondi in un modo semplice e come andare oltre, combinando la tecnica con le azioni al passaggio del mouse e le transizioni CSS per creare effetti davvero interessanti.
Segui come codifichiamo cinque diverse applicazioni di questa idea che puoi copiare e incollare per creare le tue fantastiche librazioni.
Cosa stiamo costruendo
Ecco un'anteprima di ciò che creeremo oggi. Passa il mouse sui cerchi e pensa a come realizzeresti questi effetti con puro CSS.
demo: Clicca qui per avviare la demo.
Sfondi multipli
Fino a poco tempo fa, non avevo mai giocato con l'utilizzo di più immagini di sfondo nel mio CSS. Sapevo che la funzione esisteva ma non avevo davvero trovato un modo unico di usarlo. I cieli nuvolosi paralleli sono fantastici, ma tutti li stanno facendo e non volevo semplicemente seguire la folla.
La soluzione che mi è venuta in mente è stata quella di scoprire alcuni grandi effetti al passaggio del mouse che avrebbero utilizzato sfondi multipli per creare una sorta di animazione di apertura. È un trucco super facile ma non l'ho visto prima, quindi ho pensato di mostrarti come funziona.
Ci sono un milione di modi diversi per funzionare con esso, oggi costruiremo cinque diverse versioni in modo da avere un'idea di ciò che è possibile.
Il concetto
Le tue animazioni tipiche di hover CSS sono piuttosto semplici: un'immagine scorre via per rivelarne un'altra, qualcosa ruota o rimbalza, colori sfumano e più; hai un'idea.
Quando lanciamo più sfondi nello scenario, abbiamo improvvisamente alcune variabili con cui lavorare. Con pochissime impostazioni, possiamo creare animazioni apparentemente complesse utilizzando solo transizioni CSS, che per ora hanno ancora un migliore supporto del browser rispetto alle animazioni dei fotogrammi chiave.
Per esempio, diciamo che vogliamo avere un effetto di apertura delle porte. Possiamo animare due immagini di sfondo in direzioni diverse e realizzare questa illusione con facilità:
Ora che abbiamo la spiegazione fuori dai piedi. Andiamo alla parte divertente e cominciamo a costruire i nostri effetti al passaggio del mouse.
Porte scorrevoli: orizzontali
Prendiamo l'esempio ipotetico dall'alto e vediamo se possiamo costruire qualcosa che usi questo effetto. Per iniziare, abbiamo bisogno di due immagini di sfondo.
Dal momento che stiamo solo mostrando un'idea, non importa quali immagini usi, ma assicurati che una di esse sia una trama che affiancherà. Userò la texture Dark Wood di Subtle Patterns e un pittogramma del WC gratuito Sold Out A Bta.
Base CSS
Crea un div vuoto in HTML e applica una classe che utilizza uno stile di base. Applicheremo questa classe a tutti gli esempi che costruiamo oggi.
Ne raccolgo un po 'in un unico documento, quindi ho alcuni stili di layout, ma la cosa più importante qui è il raggio del bordo impostato a metà dell'altezza / larghezza, che ci darà un bel cerchio.
Le nostre immagini di sfondo saranno impilate, ma qui sono distribuite con il raggio di confine applicato.
Applicazione di più immagini di sfondo
La prima cosa che faremo è applicare entrambe le immagini di sfondo, ma come una palla curva utilizzeremo due volte la trama del legno per un totale di tre applicazioni di immagine di sfondo.
Applicare più immagini di sfondo nei CSS è facile come si ottiene, basta applicarne una come normale, quindi inserire una virgola e applicarne un'altra.
Queste immagini avranno un ordine di impilamento naturale correlato all'ordine in cui vengono elencate: la prima è l'immagine superiore e l'ultima è la parte inferiore.
Puoi posizionare gli sfondi con la stenografia, ma per questo esempio penso sia meglio tenere le cose separate per rendere le cose facili per i lettori. Con questo in mente, gettiamo nel background-position proprietà in modo che possiamo spostare le nostre immagini in posizione.
Ovviamente, ogni set di valori di posizionamento è correlato a una delle immagini che abbiamo applicato. Il primo valore in ciascun set sposta l'immagine verso destra (valore positivo) e sinistra (valore negativo) e il secondo valore lo sposta verso l'alto (valore positivo) e verso il basso (valore negativo).
Come puoi vedere, ho diviso il cerchio proprio nel mezzo in modo che una versione dell'immagine in legno si trovi a sinistra e una a destra con l'immagine dell'auto seduta proprio al centro.
Sembra pazzesco posizionare le immagini del legno in questo modo perché potresti usarne una, ma questo ci permetterà di fare una bella animazione.
Animare le immagini
Ora, dal momento che possiamo spostare ognuna di queste immagini di sfondo in modo indipendente, possiamo ottenere risultati piuttosto interessanti se applichiamo le transizioni.
Per configurarlo, inseriamo tutti i vari prefissi del browser e creiamo una transizione semplice che dura un secondo o meno. Quindi, impostiamo un selettore al passaggio del mouse che sposta lo sfondo in legno a sinistra più a sinistra e lo sfondo in legno a destra più a destra.
Con quello, abbiamo finito con il primo esempio. Ora quando si passa il mouse sopra il cerchio di legno, le porte si apriranno per rivelare l'immagine sottostante.
Porte scorrevoli: verticali
Ora che abbiamo visto un esempio, cambiare questo effetto è un gioco da ragazzi. Qui usiamo le stesse transizioni CSS e le stesse immagini di sfondo, l'unica cosa che cambia è il posizionamento delle due immagini di texture del legno. Questa volta li impiliamo uno sopra l'altro e li spostiamo su e giù mentre l'utente si libra.
Break Apart: Squared
Andiamo un po 'più avanti e usiamo un totale di cinque immagini per la transizione. In sostanza, quando si passa il mouse sopra il cerchio, l'immagine si dividerà in quattro parti e scomparirà dalla vista.
Allineamo le prime quattro immagini in modo che si incontrino verticalmente e orizzontalmente al centro del cerchio. Quindi, al passaggio del mouse, ci spostiamo avanti e indietro.
Break Apart: arrotondato
La ripetizione di questi effetti con un'immagine arrotondata è un po 'più complicata perché uno, devi usare PNG trasparenti e due, perché devi sovrapporre le immagini allo stato predefinito. Quest'ultimo causa problemi complicati con la creazione di trame, ma se si utilizza qualcosa come una semplice trama di rumore, allora è piuttosto facile.
Twist and Shout
Questo è difficile da ottenere dall'immagine sopra. Fondamentalmente, è lo stesso della transizione separata dalla separazione, solo che ho aggiunto l'elemento extra di una rotazione che si verifica prima che le immagini si sfaldino e rivelino cosa c'è sotto.
Ciò comporta alcune stranezze. Il problema con la rotazione è che ruota tutte le immagini di sfondo, inclusa l'auto sottostante. Per tener conto di ciò, ho ruotato la macchina in anticipo in modo che la rotazione della transizione la metta esattamente al suo posto. Durante la rotazione si intravede l'auto, ma si aggiunge solo all'effetto.
Un'altra cosa interessante è la tempistica delle transizioni. Si noti che in realtà ho messo durate diverse sulla rotazione e le transizioni in movimento. Questo mostra quanto incredibilmente complesso si possa ottenere con questa idea.
Dai un altro sguardo
Ora che hai visto il codice, dai un'occhiata alla demo per vedere queste tecniche in azione.
demo: Clicca qui per avviare la demo.
Conclusione
Il punto di questo articolo è stato quello di farti pensare oltre gli effetti di parallasse per come applicare più sfondi in un modo interessante.
Lascia un commento e facci sapere cosa ne pensi degli esempi sopra. Hai fatto qualcosa con più immagini di sfondo? Vogliamo vederlo!