Oggi ci divertiremo un po 'di più con le transizioni CSS3. C'è un famoso trucco jQuery che espande il ritaglio di un'immagine quando passi il mouse su di esso e volevo replicarlo usando solo i CSS. Per andare oltre, metto questo effetto in azione in una galleria di miniature.
Continua a leggere per vedere la demo dal vivo e segui passo dopo passo mentre spieghiamo come funziona e costruisci il tutto da zero.
Cosa stiamo costruendo
Nel caso in cui tu sia il tipo di persona a cui piace saltare alla fine di un libro e fare un salto nel modo in cui tutto si rivela, ecco una demo completa di ciò che creeremo.
Demo dal vivo: clicca qui
Verifica teorica
Prima di iniziare a progettare una pagina gallery completa, costruiamo una versione ridotta solo per dare un'idea di ciò che vogliamo realizzare. L'idea di base è di avere una galleria di miniature in cui ogni miniatura è ritagliata per mostrare solo una parte di un'immagine più grande. Quindi, quando si passa con il mouse su un'immagine, la miniatura si espande per mostrare la cosa completa.
HTML
Per iniziare, crea una pagina HTML di base e lancia un paio di div come mostrato di seguito. Qui ho un contenitore di base e quindi tre immagini. Per quello che stiamo facendo, non possiamo semplicemente modellare le immagini direttamente senza un allungamento imbarazzante, quindi siamo costretti a inserirle ciascuna in un proprio div.
Ora, con solo questo codice, otterremo le modifiche di base del layout che vogliamo. Questo è importante perché ciò significa che tutti i browser che non supportano ciò che facciamo dopo funzioneranno ancora bene su questa pagina, anche se in modo semplificato.
Per rendere l'effetto più interessante anche se introdurremo una transizione CSS di base. Per prima cosa, specifichiamo che la larghezza è ciò che vogliamo targetizzare, quindi implementiamo una durata e il modo in cui vogliamo che l'animazione progredisca (easing). Infine, come sempre, ci assicuriamo di coprire le nostre basi con i prefissi del browser.
Se non sei mai sicuro di una transizione CSS3 o di qualsiasi altra sintassi in tal senso, controlla CSS3Maker.com, che genererà il codice per te da semplici controlli.
Anteprima
Questo è tutto ciò che c'è da fare! Con questo, abbiamo un effetto scorrevole per porte scorrevoli simile a quello che vedi frequentemente in jQuery. Clicca qui o sull'immagine qui sotto per vedere un'anteprima in tempo reale di ciò che abbiamo appena costruito.
Come puoi vedere, mentre si passa con il mouse su un'immagine, si espande lentamente. Il layout si adatta bene mentre le altre immagini si spostano. È super semplice ma abbastanza divertente da giocare.
Andando oltre: una galleria di miniature
Ora che il nostro concetto di base è stato risolto e lavorato senza problemi, è tempo di vedere come è possibile progettare un'intera pagina web attorno a questo concetto. Invece di solo tre immagini, ci espanderemo in una galleria più grande di miniature. Iniziamo con un po 'di HTML.
Immagini HTML
La prima cosa che vogliamo fare è disporre le nostre immagini proprio come facevamo prima. Questa volta tuttavia, avremo due file di quattro. Si noti che li ho separati in due sezioni distinte. La mia idea originale era di far rifiorire la galleria in modo che, man mano che un'immagine si espandeva e spingesse gli altri in avanti, automaticamente saltavano nella fila successiva. All'inizio questo ha funzionato alla perfezione, ma ho notato che il passaggio del mouse sull'ultima immagine di seguito è stato problematico poiché saltava giù mentre eri in bilico. Funzionava, ma era semplicemente troppo imbarazzante. Penso che questa soluzione sia molto più elegante e facilmente espandibile.
Con questo codice, la nostra galleria è completa. Le animazioni sono fluide e avere più righe rende davvero l'effetto più impressionante. Se si desidera aggiungere un'altra riga, basta copiare e incollare una galleriaRow div; non è più necessario il CSS.
Ecco come appare la galleria ora. Nota come l'immagine espansa abbia esattamente la stessa larghezza delle due immagini più piccole sotto di essa.
Finitura della pagina: HTML
Non mi piace mai lasciare un esempio così semplice, quindi finiamo il disegno. Per fare ciò, aggiungiamo un'intestazione e un paragrafo di base che spiegano la galleria.
Getterò anche questo frammento nella mia testata così posso usare? Oswald? dalla Google Font Library.
Finire la pagina: CSS
Il nostro ultimo passo è quello di dare uno stile a queste due porzioni di testo. Si noti che sto usando la stenografia per il font, che consente di risparmiare un sacco di spazio nel nostro CSS. Puoi vedere che ho dichiarato il font di Oswald proprio come farei con qualsiasi altro. Anche se le opzioni sono ancora abbastanza limitate, mi piace davvero quanto sia semplice e non restrittiva la libreria di caratteri di Google.
Prodotto finito
Il nostro piccolo progetto è ora completo. Dai un'occhiata alla demo live qui sotto per vederla in azione. Non è fantastico quanto possiamo ora realizzare senza una sola riga di JavaScript?
Demo dal vivo: clicca qui
Lascia un commento qui sotto e facci sapere cosa pensi di questo effetto. Assicurati anche di menzionare tutte le idee che hai per migliorarlo!