Il progetto di oggi è sciocco e divertente, ma ha un vero scopo e uno scopo educativo. In un recente articolo, ho esplorato cinque modi per utilizzare più immagini di sfondo CSS per creare effetti cool hover. Ho avuto un'idea in quell'articolo che non ho potuto ottenere semplicemente perché la sua complessità meritava una spiegazione autonoma.
Questo articolo è quindi un'estensione di quella discussione precedente. Useremo più sfondi per creare un fantastico effetto cinematografico in cui qualcuno percorre una mappa mentre il punto di osservazione si ingrandisce. Il modo migliore e più nerd-tastic per dimostrarlo è ovviamente usare la storia familiare di Frodo che attraversa la Terra di Mezzo per arrivare al Monte Fato a Mordor. Iniziamo.
Il concetto
L'idea di base per questo effetto hover è semplice. C'è un contenitore con due sfondi diversi. Quello sul fondo della pila riempie l'intero contenitore, quello in cima alla pila è molto più piccolo. Al passaggio del mouse, l'immagine intera al vivo (che in realtà si estende ben oltre il contenitore) si sposta a sinistra mentre l'immagine piccola si sposta a destra. Questa è una tecnica di animazione super fondamentale che fa sembrare che il soggetto si stia muovendo attraverso la scena.
Per rendere le cose ancora più interessanti, voglio che la scena inizi con una visualizzazione ingrandita del soggetto e poi la panoramica per visualizzare il paesaggio nel suo complesso.
Perché la Terra di Mezzo?
L'uso più pratico a cui potevo pensare per questa idea era mostrare qualcuno che si muoveva attraverso una mappa. Questo è un tipico caso d'uso. Se la tua azienda ha appena cambiato posizione o la tua famiglia è appena andata in vacanza, ti sarà piuttosto facile trovare una scusa decente per implementare una divertente animazione della mappa.
? Sentiti libero di prendermi in giro nei commenti, dopo aver visto la demo, mia moglie mi assicura che me lo merito.?Ora, dato che sono un nerd enorme che è completamente entusiasta del film in uscita, "The Hobbit", la mia mente balzò immediatamente su una scena dalla Terra di Mezzo. Di conseguenza, il progetto di oggi si è evoluto in una punta di cappello per l'ultimo viaggio hobbit cinematografico. Sentiti libero di prendermi in giro nei commenti, dopo aver visto la demo, mia moglie mi assicura che me lo merito.
Perché più immagini di sfondo?
Potremmo fare la stessa cosa con le immagini rilasciate nel nostro HTML? Sì. Ci darebbe ancora più libertà di manipolare le immagini? Scommetti.
Allora perché non usiamo l'HTML? Perché l'intero punto dell'esercizio è imparare come brandire più immagini di sfondo in CSS, ecco perché! Un giorno sarai costretto a codificare qualcosa con più immagini di sfondo e per fortuna saprai tutto su di loro.
Guardalo in azione
Prima di iniziare a costruire, diamo un'occhiata a ciò che stiamo cercando di creare. Clicca qui sotto per controllare il prodotto finito.
demo: Clicca qui per lanciare la versione live.
Introduzione: l'HTML
Questo esperimento utilizza tutti i CSS con un markup minimo. Tutto ciò di cui hai veramente bisogno per l'intero progetto è un singolo div vuoto. Questo è tutto!
Ovviamente, puoi aggiungere testo e altri oggetti per rendere l'oggetto più complesso ma per gli scopi di oggi, questo è tutto l'HTML di cui abbiamo bisogno.
Ridimensiona il div
Prima di procedere con qualsiasi altra cosa, dobbiamo decidere una taglia per il nostro div. Questo influenzerà tutto il resto delle nostre decisioni. Ho scelto un rettangolo di buone dimensioni: 500 px di larghezza per 375 px di altezza. Poi l'ho centrato sulla pagina e l'ho rilasciato dalla parte superiore della pagina di 20px.
Prepara le tue immagini
Per seguire, avrai bisogno di due immagini: una mappa e un soggetto. Puoi usare qualsiasi cosa tu voglia ma ho scelto le due immagini qui sotto per ragioni già spiegate:
La mia mappa della Terra di Mezzo è abbastanza grande: 1000px per 750px e la mia immagine di Frodo è piuttosto piccola: 100px per 100px.
Pianifica l'animazione
Ora che abbiamo le nostre immagini, dobbiamo riflettere attentamente su ciò che stiamo cercando di fare. Ovviamente, Frodo inizia il suo viaggio in The Shire, quindi avremo bisogno di ingrandire il quadrante nord-occidentale della mappa e posizionare la piccola immagine da qualche parte in quella zona.
Quindi fa un viaggio a Mordor, che si trova nel quadrante sud-est, quindi vogliamo che Frodo si sposti verso destra e in diagonale. All'inizio dell'animazione, vogliamo essere ingranditi su The Shire ma alla fine dell'animazione vogliamo vedere tutta la Terra di Mezzo. Ecco i due stati per la nostra dimensione della mappa:
- Dimensioni della mappa iniziale: 1.000 per 750 pixel (dimensione intera)
- Dimensione mappa finale: 500 x 375 pixel (la dimensione div)
Frodo avrà anche bisogno di cambiare dimensione poiché stiamo zumando. Dal momento che i numeri sopra hanno funzionato per tagliare perfettamente la dimensione dell'immagine a metà, seguiremo il vestito qui:
- Dimensioni Frodo iniziali: 100 per 100 pixel (dimensione intera)
- End Frodo Dimensioni: 50 per 50 pixel (metà misura)
Dovremo anche posizionare le immagini, ma è più facile da fare al volo mentre le inseriamo, quindi procediamo con questo passaggio.
Inserisci le immagini
Ora è il momento di lanciare le immagini nel nostro div. La cosa grandiosa dell'utilizzo di più sfondi è che non hai bisogno di alcun prefisso per i fornitori pazzi, non hai nemmeno bisogno di imparare nuova sintassi, basta rilasciare un'immagine come sempre, inserire una virgola, quindi lanciare un'altra immagine.
Qui ho gettato alcuni ritorni in linea per chiarezza. Aggiungono spazio extra, ma aiutano a mantenere leggibile il codice. Tieni presente che l'ordine di impilamento nel codice rappresenterà l'ordine di sovrapposizione nella versione live. Qui la mappa è in basso e il soggetto è in cima, che è esattamente ciò di cui abbiamo bisogno (questo è tutto nel selettore #middleEarth).
Ecco cosa ci offre questo:
La buona notizia è che la mappa è, per impostazione predefinita, posizionata in alto a sinistra come origine, che è esattamente ciò che vogliamo. La cattiva notizia è che Frodo è posizionato allo stesso modo, quindi dovremo trasferirlo a The Shire per iniziare.
Per posizionare l'immagine di Frodo, aggiungi semplicemente una posizione orizzontale e verticale dopo la "no-repeat? po. Il modo migliore per farlo è solo sperimentare e vedere cosa funziona. Sono arrivato con 150px 150px, che lo colloca proprio accanto all'etichetta per The Shire.
La nostra configurazione iniziale ora è proprio dove vogliamo che sia.
Applicazione di dimensioni immagine separate
Per assicurarci che l'animazione funzioni in modo corretto, dobbiamo assicurarci di ottenere alcune cose fondamentali. Un passo importante è dichiarare le nostre dimensioni dell'immagine di sfondo.
Inizialmente non sono necessari poiché stiamo semplicemente utilizzando la dimensione predefinita, ma non possiamo animare la modifica senza dichiarare esplicitamente i parametri di avvio e di arresto. Usiamo semplicemente il background-size proprietà con e inserire una virgola per separare i valori. Proprio come con l'inserimento delle immagini, possiamo manipolare in modo univoco le proprietà corrispondenti di ogni immagine usando una virgola.
Stili al passaggio del mouse
Al passaggio del mouse, Frodo deve partire da Mordor mentre la mappa inizia a rimpicciolire. Abbiamo già capito la maggior parte di ciò che dobbiamo fare. Questa volta le nostre dimensioni di sfondo devono essere 50px per 50px e 500px per 375px (si restringe Frodo, ingrandisce per mostrare la mappa completa). Inoltre, abbiamo bisogno di spostare Frodo verso la Terra di mezzo, quindi aumentiamo lo spostamento orizzontale e verticale rispettivamente a 400 px e 240 px.
Questo mette il buon vecchio Frodo nel cuore di Mordor.
Fase finale: l'animazione
Ora abbiamo il nostro punto di partenza e il nostro punto di arresto impostato, tutto ciò che rimane è l'animazione. Naturalmente, useremo le transizioni CSS per questo. Le animazioni dei fotogrammi chiave CSS sarebbero molto più divertenti e ci consentirebbero di fare molto di più (come fare le soste appropriate lungo la strada), ma non sono così ampiamente supportate quindi dovremo attenerci alle transizioni.
Al passaggio del mouse, voglio che il viaggio sia bello e lungo, circa cinque secondi. Quando si interrompe il passaggio del mouse, l'animazione dovrebbe tornare indietro nel punto in cui è stata avviata. Tuttavia, voglio che sia molto più veloce qui, circa un secondo.
Per fare ciò, dobbiamo impostare due transizioni separate. Il primo va nel #terra di Mezzo selettore ed è impostato su un secondo. Stranamente, questo controllerà l'animazione del mouse. La seconda transizione entra nel #middleEarth: hover selettore, controlla l'animazione del mouse.
Ecco il nostro CSS completo, che mostra tutto il necessario per far funzionare tutto:
Conclusione
Con quello, siamo tutti finiti! Ora dovresti sapere un sacco di cose interessanti sull'utilizzo di più sfondi: come applicarli nell'ordine di picchettamento appropriato, posizionarli in modo indipendente e animare le dimensioni e la posizione di ciascuna immagine.
Assicurati di dare un'altra occhiata alla demo per vedere il progetto in azione e facci sapere cosa ne pensi nella sezione commenti qui sotto.