Vuoi creare un effetto davvero unico e accattivante per il tuo sito? Che ne dici di un'animazione che ingrandisce una porzione specifica della pagina quando fai clic su di essa?
Può sembrare un sacco di lavoro, ma con jQuery e Zoomooz.js, è un gioco da ragazzi! Ti guiderò attraverso il processo passo dopo passo mentre costruiamo una straordinaria galleria di miniature per lo zoom.
Cosa stiamo costruendo
Dimostrazione dal vivo: Clicca qui
Zoomooz.js: Introduzione di base
Quando si lavora con nuove librerie, è sempre meglio iniziare con un semplice esempio, solo così puoi avere un'idea di come tutto funzioni. Con questo progetto costruiremo una pagina di base per testare la funzionalità di zoom della sceneggiatura, quindi passeremo a un esempio più pratico creando una galleria di miniature completa.
HTML: The Inclusions
Questo progetto ha un sacco di cose da includere nella parte principale del tuo HTML. La prima cosa che vuoi fare è andare sulla homepage di Zoomooz.js e scaricare la libreria. Vedrai che contiene davvero non una ma diverse librerie JavaScript. Fortunatamente, nel download troverai le istruzioni per l'esecuzione di uno script per combinare e ridurre a icona tutto in modo che non sia così grande e disordinato (lascerò questo passaggio a te).
Con questo in mente, il nostro piccolo esperimento richiederà il seguente codice per iniziare:
Il JavaScript
Successivamente, copia e incolla lo script qui sotto nel tuo codice HTML. Come puoi vedere, quello che fa è indirizzare lo zoom della classe? e applica lo? zoomTo? metodo dalla libreria. Quindi, applichiamo la stessa cosa al corpo, che consente all'utente di fare clic all'esterno di qualsiasi elemento per tornare al livello normale.
Non preoccuparti troppo se non lo capisci. Tieni presente che dovremo applicare lo zoom? classe agli elementi che vogliamo essere zoomabili. Lo stesso esatto snippet verrà applicato in entrambi i progetti di oggi, quindi sentiti libero di copiarlo.
L'HTML
Successivamente, vogliamo impostare un terreno di prova di base. Per fare ciò, dobbiamo creare un contenitore, un div esterno e un div interno. Il contenitore può sembrare arbitrario ma includendolo e impostando una larghezza / altezza, aiuta l'effetto dello zoom a funzionare correttamente sull'elemento più esterno.
Notare anche che abbiamo applicato lo zoom? classe per entrambe le div esterne e interne. Il collegamento a questo punto è in realtà solo un elemento fittizio per guidare l'utente. La sceneggiatura funziona perfettamente senza di essa.
Il CSS
Successivamente, applichiamo dimensioni e posizionamento a ciascun elemento. Ancora una volta, una dimensione del contenitore definita rende la funzione di zoom corretta, così come la posizione? Assoluto? affermazione sul? interiore? div. La sceneggiatura può essere un po 'eccentrica quindi assicurati di avere questi elementi giusti.
CSS di testo
Infine, qui ci limitiamo a inserire alcuni stili di testo di base per il paragrafo insieme a uno stato di passaggio del mouse. Di nuovo, sentiti libero di abbandonare completamente il collegamento.
dimostrazione
Con questo, la nostra semplice demo è finita. Avvia la pagina demo per vederla in azione. Si noti che facendo clic su ogni div si ottiene un diverso livello di zoom e facendo clic nel corpo si ingrandisce l'immagine.
Zoomooz.js: galleria di miniature
Utilizzando questa stessa tecnica, possiamo creare una fantastica galleria di miniature con un effetto zoom. È importante notare che questo plugin probabilmente funziona meglio per elementi resi con il browser. Quando lo usiamo per le immagini, come vedremo in seguito, la sfortunata realtà è che devi caricare tutto nella sua dimensione ingrandita.
Quindi, nonostante abbia una pagina piena di piccole miniature, in realtà viene caricata una pagina piena di immagini di grandi dimensioni, che può richiedere diversi secondi a seconda della velocità di connessione dell'utente.
Nonostante questa limitazione, è ancora divertente spingere le cose al limite e vedere cosa è possibile.
HTML
L'HTML per questo progetto sarà in realtà molto semplice. Comincio con un div contenente un testo descrittivo, in pratica solo un'intestazione rapida e un tag di paragrafo per spiegare cosa sta succedendo. Successivamente, ho creato una grande lista non ordinata contenente le immagini. Questo è praticamente tutto!
Si noti che ho applicato lo zoom? classe per entrambi la? galleria? div nel suo complesso e ad ogni immagine all'interno del div. Questo ci darà due livelli di zoom con cui giocare. La libreria è abbastanza intelligente da gestire automaticamente i livelli di zoom relativi in base alle relazioni genitore / figlio.
Inoltre, assicurati di prendere il codice sorgente e JavaScript dell'esempio precedente. Sto usando la stessa esatta configurazione, solo il mio corpo HTML e CSS cambieranno.
Dopo aver terminato lo styling del contenitore della galleria, è ora di rendere la nostra grande lista di immagini conformi a una griglia. Per fare questo, dichiarare? Nessuno? come stile list-type e float gli elementi? li 'lasciati. Notare anche il contesto di posizionamento e l'effetto hover. Per l'ultimo di questi, ho lasciato cadere i margini al passaggio del mouse in modo che il bordo non influisse sul layout. Quindi, per iniziare, ogni miniatura ha un margine di 10 px, quindi al passaggio del mouse una miniatura ha un margine di 7 px e un margine di 3 pixel (7 + 3 = 10).
Con quello, abbiamo finito! Clicca l'immagine qui sotto per avviare la demo.
Conclusione
Oggi abbiamo utilizzato in modo sinergico HTML, CSS e JavaScript per creare una galleria web pazzesca che ingrandisce la miniatura in una miniatura quando fai clic. Come abbiamo mostrato nella demo del test, questo stesso effetto può funzionare su qualsiasi elemento tu voglia!
Abbiamo appena graffiato la superficie di ciò che Zoomooz.js può fare. Fermati dalla pagina del progetto per vedere come fare ancora di più con questo fantastico plugin.