Il progetto di oggi è un'altra esplorazione dei tipi di applicazioni pratiche che è possibile ottenere con un po 'di ingegno e alcuni CSS abbastanza semplici. Sarai stupito da quanto puoi ottenere con poche righe di codice.
Il risultato finale può essere un ottimo modo per visualizzare una striscia di miniature di immagini di piccole dimensioni che l'utente può passare con il mouse per vedere immagini più grandi. Entriamo e vediamo come funziona.
Il concetto
Il layout di base qui è piuttosto semplice. Vogliamo una striscia di immagini in miniatura e una grande immagine in primo piano. La parte delicata consiste nel cambiare l'immagine in primo piano quando l'utente si posiziona su una delle miniature.
Sbirciata: Clicca qui per avviare il prodotto finito.
Con i CSS, non puoi creare due div distinti e quindi avere il contenuto di un servizio come punto di azione per l'altro. È abbastanza semplice in JavaScript, ma i CSS ti danno meno libertà nel modo in cui impili i selettori.
Tuttavia, se siamo abili su come strutturiamo il nostro HTML, questo progetto è in realtà abbastanza semplice da realizzare. Vediamo come si presenta.
L'HTML
Per fare questo, avremo bisogno di quattro immagini in miniatura e quattro immagini a dimensione intera. La chiave per avere il primo atto su quest'ultimo è avvolgerli insieme in questo modo:
Il motivo per cui impostiamo un'altezza e una larghezza specifiche è che possiamo far scorrere un'immagine dai limiti del contenitore e farla nascondere. A tal fine, applichiamo anche un valore di overflow nascosto e finito centrando tutto con margini automatici.
Controllo avanzamento
A questo punto, stiamo diventando piuttosto difficili, ma non preoccuparti, tutto è sulla buona strada!
Posiziona tutto
Come hai appena visto nello screenshot, le tue immagini saranno dappertutto a questo punto, quindi ora è il momento di forzare ogni cosa nella sua giusta posizione.
Ancora una volta, questo richiede un po 'di riflessione. Vogliamo che tutte le nostre miniature siano raggruppate insieme e che tutte le nostre immagini grandi siano raggruppate insieme, ma non è così che l'HTML è strutturato.
Dato che ogni tipo di immagine (piccola e grande) ha una sua classe, possiamo spostare tutti i nostri ancoraggi a sinistra e quindi separare le immagini di grandi dimensioni applicando il posizionamento assoluto.
È molto importante capire come funziona, percorriamolo. Galleggiamo i nostri link a sinistra fatti tutti delle immagini appaiono in linea, una dopo l'altra. Tuttavia, il posizionamento assoluto sulle immagini grandi li allontana da questo flusso e li posiziona specificamente nello spot che abbiamo designato usando le proprietà superiore e sinistra. Questo lascia solo le immagini in miniatura da flottare.
Controllo avanzamento
Con pochissimo codice siamo stati in grado di trasformare la nostra confusione di immagini in un layout ben organizzato. Nota che a questo punto vedrai solo un'immagine grande perché le altre sono impilate sotto di essa.
Portalo alla vita
Ora che tutto è a posto, è tempo di farlo funzionare. La prima cosa che vogliamo fare è spostare tutte le grandi immagini tranne la nostra copertina in primo piano fuori dai limiti del contenitore. Ciò implica fare un passo indietro e rivedere parte del nostro codice precedente.
Torna indietro e imposta tutte le immagini grandi a 900px dall'alto. Questo li spingerà fuori dal fondo del nostro contenitore. Mentre sei lì, dovresti anche impostare una transizione. Scegli come target la proprietà top e imposta la durata della transizione su un secondo e la funzione di timing per facilitare.
Questo codice spinge tutti delle grandi immagini fuori limite, compresa la nostra immagine di copertina. Usa il codice qui sotto per riportarlo indietro.
Qui abbiamo usato i valori superiore e sinistro che avevamo stabilito prima per fissare la copertina in un punto. Il valore z-index garantisce che questa immagine rimanga sul fondo della pila. Se non lo facciamo, non saremo nemmeno in grado di vedere le altre immagini quando entrano in azione!
Stili al passaggio del mouse
Ora che abbiamo messo tutte le grandi immagini al di fuori del contenitore, dobbiamo riportarle indietro quando l'utente si libra. Questo si ottiene scegliendo come target le grandi immagini e restituendo la proprietà top a 260px. Ho anche aggiunto un effetto ombra alle miniature in modo da poter vedere il hover che ha effetto.
A causa del modo in cui impostiamo il nostro HTML, ogni miniatura corrisponde automaticamente alla sua grande immagine di accompagnamento.Quindi, anche se passiamo sopra all'anteprima, il browser lo vede come un'ancora e non fa caso a manipolare solo la parte con la grande classe applicata. Abbastanza pulito, giusto?
Guardalo in azione
Con questo, abbiamo finito con il nostro fantastico cursore. Dai un'occhiata alla demo live qui sotto e passa il mouse sopra le miniature per dargli un giro di prova. Per mostrare la versatilità di questo progetto, ho incluso due versioni alternative nella demo che implementano animazioni leggermente diverse. Assicurati di controllare anche loro.
demo: Clicca qui per il lancio.
Conclusione
Se stavi prestando molta attenzione, hai imparato un sacco di cose in questo tutorial. Innanzitutto, abbiamo superato la sfida di come utilizzare un pezzo di un documento HTML per agire su un altro utilizzando solo i CSS, il che non è un'impresa da poco. In aggiunta a ciò, abbiamo appreso alcune tecniche di posizionamento interessanti e ci siamo persino dilettati a manipolare l'ordine di impilamento delle immagini tramite z-index.
Se ti è piaciuto questo tutorial, lascia un commento e faccelo sapere. Hai altri usi per i voli al telecomando come abbiamo usato qui? Voglio sentirli!