Le gallerie di miniature sono una fonte costante di fascino per me. C'è molto più divertimento che creare una griglia di quadrati e chiamarla un giorno. Tanto più che i CSS3 ci offrono così tanti nuovi e potenti strumenti con cui lavorare.
Oggi mescoleremo la noiosa galleria di immagini standard trasformandola in una serie di cerchi animati. Lungo la strada impareremo un sacco di utili conoscenze CSS che ti aiuteranno in tutti i tipi di progetti futuri.
Sbirciata
Se sei il tipo di persona a cui piace saltare fino alla fine in modo da poter vedere dove stai andando, controlla la demo dal vivo del prodotto finito di seguito. Ho incluso tre diverse versioni dell'animazione per darti alcune idee su come variare l'effetto.
demo: Clicca qui per il lancio.
Il concetto
Prima di iniziare a costruire la galleria delle miniature, parliamo un po 'di ciò che stiamo cercando di ottenere. L'obiettivo qui è avere una griglia di immagini circolari che animano al passaggio del mouse. Quando il mouse entra nel cerchio, l'immagine di sfondo dovrebbe spostarsi e una didascalia precedentemente nascosta dovrebbe scorrere in vista. Sembra abbastanza semplice, vero? C'è una palla curva importante però.
Quando stavo pianificando come realizzare questa impresa, mi sono imbattuto in un po 'di intoppo. Il modo più semplice e diretto per implementare l'effetto dell'immagine scorrevole è utilizzare le immagini di sfondo CSS. Questa strada ha molti vantaggi pratici per noi.
Immagine di sfondo Pro
- L'immagine verrà automaticamente posizionata dietro il testo
- È facile ritagliare l'immagine sul suo genitore
- Animare l'immagine è facile, basta spostare la posizione dello sfondo
Come puoi vedere, c'è una forte argomentazione per intraprendere questa strada. Il più grande vantaggio è probabilmente il primo. Se mettiamo tutto il nostro contenuto in HTML, allora il testo sposterà effettivamente l'immagine piuttosto che fluttuare sopra di essa, quindi dovremo eseguire alcuni voodoo CSS.
Se stavo solo lavorando con una singola immagine, questa sarebbe sicuramente la strada che avrei intrapreso. Tuttavia, dal momento che stiamo lavorando con una galleria di immagini, sembra sbagliato in qualche modo togliere le immagini dall'HTML. Sono davvero al centro del contenuto della pagina, quindi mi sento come se dovessero essere in con il contenuto. Potrei pensarci sopra, ma mi sento come se le immagini della galleria di miniature dovessero essere inserite via HTML quando possibile. Indipendentemente da ciò, percorrere questa strada rende sicuramente il compito più impegnativo, il che è ottimo per scopi didattici! Diamo un'occhiata ad alcune complicazioni che affronteremo usando questo metodo.
Contro immagine HTML
- È un po 'più complicato far ritagliare l'immagine in un cerchio
- Spostare l'immagine non sarà così semplice
- Il nostro ordine di impilamento sarà tutto rovinato
- Usare il posizionamento relativo con gli angoli arrotondati è un disastro
Come puoi vedere, abbiamo il nostro lavoro tagliato per noi. Fortunatamente, non è così difficile come sembra e con un po 'di ingegno, avremo la nostra galleria attiva e funzionante in pochissimo tempo. Iniziamo!
L'HTML
Il markup per questa galleria sarà molto breve. Tutto ciò di cui abbiamo veramente bisogno è una lista non ordinata. All'interno di ogni elemento della lista, posiziona una porzione di testo seguita da un'immagine (puoi opzionalmente collegare l'immagine a qualche parte, l'ho lasciata fuori per semplicità).
Si noti che la larghezza del contenitore non è arbitraria. Consentirà per quattro immagini a 200px un pezzo con 50px di margine su ciascuna (250 * 4 = 1.000).
Aggiornamento del progresso
A questo punto, lo sfondo dovrebbe essere scuro e i punti elenco sulle tue voci di elenco dovrebbero essere spariti. Altrimenti, sembrerà in gran parte uguale all'ultima volta. Clicca qui per avviare il live Dabblet.
Linea 'Em Up, Round' Em Off
Quindi dobbiamo scegliere come target gli elementi dell'elenco. Assicurati di utilizzare un selettore più specifico di? Li? come sicuramente non vorrete mai che tutti gli elementi della vostra lista abbiano questo stile. La galleria? class fornisce un comodo hook per rendere questi stili specifici per le gallerie che hai impostato.
Nonostante il fatto che le nostre immagini siano di 400 px quadrati, in realtà vogliamo che i cerchi sulla pagina siano di 200 px quadrati. Per fare ciò, è sufficiente impostare 200 px come altezza e larghezza per gli elementi dell'elenco. Per arrotondare gli elementi dell'elenco, impostare il raggio del bordo al 50%. Non vedrai l'effetto fino a quando non applichi l'overflow: nascosto? comando. Assicurati anche di lasciarli a sinistra in modo che appaiano in linea retta.
È importante notare il fatto che stiamo facendo tutto questo alla voce dell'elenco, non alle immagini. Ciò significa che le immagini conserveranno ancora le loro dimensioni originali più grandi, saranno semplicemente tagliate alla dimensione della voce di elenco, che consentirà loro di scorrere più avanti.
Aggiornamento del progresso
Dopo questo, la tua galleria dovrebbe prendere forma. Dovresti avere quattro immagini circolari per riga con il contenitore principale centrato. La parte strana è che le nostre cerchie sono piatte sulla parte superiore! Questo è semplicemente perché le nostre immagini devono essere messe in posizione, che gestiremo in seguito. Clicca qui per avviare il live Dabblet.
Fai Scoot e imposta l'animazione
Come abbiamo visto nell'ultimo passaggio, le nostre immagini sono effettivamente troppo in basso.Possiamo risolvere questo problema scegliendo come target qualsiasi immagine all'interno delle nostre voci dell'elenco di gallerie e applicando un margine negativo verso l'alto.
Mentre siamo qui, andremo avanti e configureremo l'animazione. Abbiamo appena appreso che possiamo esplorare l'immagine usando i margini, quindi questa è la proprietà che verrà scelta come target nella transizione.
Aggiornamento del progresso
L'unica differenza visiva che noterai questa volta è che la parte superiore piatta sui cerchi è stata corretta. Clicca qui per avviare il live Dabblet.
Stile i paragrafi
Probabilmente hai notato che fino a questo punto i nostri paragrafi sono stati completamente nascosti. Questo perché sono impilati sopra le immagini e fuori dai limiti dell'elemento di elenco ritagliato. Risolvere questo problema non è facile come potresti pensare.
Il primo pensiero che mi venne in mente fu semplicemente di usare il vecchio trucco di posizionamento assoluto / relativo. Ciò comporta l'impostazione della posizione degli elementi del paragrafo su assoluto e della relativa voce sull'elenco. Ciò ci consentirebbe di allineare il paragrafo in relazione al punto di partenza dell'elemento dell'elenco. Sfortunatamente, c'è un bug nel modo in cui la maggior parte dei browser rende il raggio di confine che è illustrato nell'immagine qui sotto.
Come puoi vedere, il secondo andiamo ad applicare il posizionamento relativo al nostro elemento genitore, perderà i suoi angoli arrotondati. Questo è sicuramente un fastidio, ma non è la fine del mondo. Invece, utilizzeremo semplicemente il posizionamento relativo sul nostro paragrafo e lo porteremo in posizione con l'alto e il sinistro.
Questo mostrerà il nostro paragrafo e ci consentirà di applicare alcuni stili di testo di base. Creeremo anche l'animazione per il testo, ma invece di usare il margine come prima utilizzeremo la proprietà top.
Si noti che ho impostato il? Top? proprietà al 75% in questo passaggio. Questo è semplicemente trovare un punto debole per il punto finale di riposo dei paragrafi. In realtà, vorremmo che fossero nascosti, quindi imposta il valore massimo al 110%.
Aggiornamento del progresso
Dopo questo passaggio, gli snippet di testo dovrebbero ora essere visibili nella parte inferiore delle tue cerchie. Clicca qui per avviare il live Dabblet.
Imposta i tuoi stili al passaggio del mouse
Ora, con tutto configurato e posizionato come se fosse necessario, tutto ciò che dobbiamo fare è spostare tutto quando l'utente passa sopra gli elementi dell'elenco. Per fare ciò, utilizzeremo un trucco accurato in cui selezioniamo come target gli elementi dell'elenco al passaggio del mouse, quindi scegli un elemento secondario di quell'elemento da modificare. Per iniziare, miriamo agli elementi della lista al passaggio del mouse, quindi più indichi che le immagini sono ciò che stiamo cambiando. Quindi ripetiamo questo trucco con i paragrafi.
Per le immagini, applica uno spostamento verticale e orizzontale nel margine e per il paragrafo, riporta il valore superiore al 75% che abbiamo deciso in precedenza.
Aggiornamento del progresso
Con ciò, la nostra demo sta finalmente funzionando come vogliamo noi! Passa il mouse sopra ciascuna immagine per vedere l'effetto in azione. Clicca qui per avviare il live Dabblet.
Prodotto finito
Abbiamo finito! Come accennato nell'introduzione, la pagina demo include anche alcune versioni alternative dell'effetto. Ce ne sono tre in totale: pan, zoom in e zoom out. Clicca sul link qui sotto per verificarlo.
demo: Clicca qui per il lancio.
Conclusione
Questo progetto ha esteso la nostra zona di comfort adottando un approccio diverso a uno sfondo animato. Invece di usare i CSS per posizionare l'immagine, siamo stati in grado di rimuovere l'effetto sia dal testo che dall'immagine nel nostro markup. È un po 'il contrario del tipico,? Meno markup? strategia, ma è una buona esperienza di apprendimento. Essere in grado di lavorare con entrambi gli scenari ti renderà un programmatore migliore, in grado di gestire molti ostacoli diversi.
Una nota a parte, una delle cose che mi infastidisce sempre con i CSS è il fatto che spesso si attivano alcuni effetti visivi non voluti al caricamento della pagina. Quindi, mentre la pagina sta disegnando, le transizioni stanno rendendo il processo normalmente istantaneo lungo e scomodo. So che questo può essere risolto con JavaScript, ma se hai una soluzione CSS pura, mi piacerebbe sentirla. Per la demo, ho semplicemente applicato le animazioni ai selettori hover, ma questo uccide l'animazione al passaggio del mouse. Sai di un modo migliore? Fatemi sapere nei commenti qui sotto.