Oggi costruiremo una pagina web che utilizza non uno, ma tre slideshow separati che si uniscono per apparire come un elemento seriamente dinamico. Questo effetto è perfetto per qualsiasi portfolio di designer o fotografo.
Lungo la strada useremo alcuni HTML, CSS e jQuery estremamente semplici. Apri un editor di testo e segui le istruzioni per crearne uno tuo!
Ispirazione
Di recente ho sfogliato la nostra fantastica galleria di design e mi sono imbattuto nel portfolio fotografico di Jessica Kripp, mostrato di seguito. Sono rimasto immediatamente impressionato dal tipo di muro di slideshow fotografico che occupava la homepage.
Qui non abbiamo solo uno, ma tre distinti slideshow fotografici che funzionano indipendentemente, ma progettati in modo sinergico come una singola unità. È un effetto davvero eccezionale che non ho mai visto prima. Potrebbe essere un po 'troppo impegnativo per il processore, ma è comunque abbastanza divertente.
Oggi saliremo e costruiremo uno di questi per vedere come è fatto. Useremo HTML, CSS e jQuery, ma non lasciare che nessuno ti intimidisca, è tutto molto semplice e sarà perfetto per tutti i principianti.
Passaggio 1: HTML di base
Il modo più semplice per avvicinarsi a questo progetto è quello di rimuovere il layout di base della pagina e il lavoro di progettazione prima di iniziare a giocare con JavaScript. Ciò significa che progetteremo la pagina con immagini statiche e quindi torneremo e aggiungeremo la funzionalità di presentazione.
Per iniziare, crea un contenitore base seguito da tre div, ciascuno contenente un'immagine. Lo so, stiamo già ottenendo un piccolo div pesante, ma il plugin jQuery che utilizzeremo in seguito per la presentazione richiede che ognuna di queste immagini abbia il proprio contenitore genitore.
In seguito, modifichiamo le foto div. La cosa più importante qui è che ho impostato il float della smallPhoto1 a sinistra e quello di smallPhoto2 a destra. Ciò assicurerà che scorrano correttamente e si scontrino l'un l'altro (se hai ancora problemi di layout, prova con un div clearfix). Ho anche aggiunto valori di altezza per ciascuno. A lungo termine questi non sembrano essere necessari, ma stavo avendo alcuni problemi di layout in questa fase senza di loro.
Passaggio 2: Anteprima
Dopo il CSS sopra, la tua pagina dovrebbe apparire bella e pulita con uno sfondo scuro e una griglia fotografica stretta come mostrato nell'anteprima sottostante.
Passaggio 3: Strumenti di terze parti
Ora che la nostra pagina è sostanzialmente finita per quanto riguarda il layout, è ora di prepararsi a rendere la pagina più dinamica. Per fare ciò, dovremo caricare due strumenti JavaScript.
Il primo è una libreria che non richiede presentazioni. jQuery è l'estensione JavaScript preferita di tutti che generalmente facilita la vita sia che tu stia creando animazioni complesse o semplicemente desideri un modo migliore per scegliere come target elementi specifici.
Per assicurarmi di avere la versione più aggiornata di jQuery, passo sempre a ScriptSrc, dove fai semplicemente clic su un pulsante per copiare il link della build più recente negli Appunti.
Il vero motore dietro le nostre presentazioni di oggi sarà jQuery Cycle un plugin che rende super facile creare slideshow jQuery al volo.
Vedremo come implementarlo nel prossimo passaggio. Per ora puoi includere il seguente script nella tua intestazione.
Modernizr
Se, come me, ti piace usare HTML5 e CSS3, ti consigliamo di lanciare anche Modernizr solo per assicurarti che tutto sia il più compatibile possibile con IE.
Passaggio 4: portare in vita le presentazioni
L'implementazione di jQuery Cycle è semplicissima. Ci sono tonnellate di opzioni ed effetti, ma per gli scopi di oggi utilizzeremo solo il minimo delle funzionalità disponibili.
Per iniziare, perfezioniamo un po 'il nostro codice HTML. jQuery Cycle cercherà qualsiasi cosa con la classe di? slideshow? e creare una presentazione dai suoi figli. Per ovviare a questo, aggiungiamo la classe di presentazione alle nostre tre div di immagine e aggiungiamo altre due immagini a ciascuna. Questo farà sì che ogni immagine passi attraverso tre iterazioni.
Ora aggiungiamo un po 'di stile. Faremo lo sfondo dello stesso colore del titolo per consistenza e aggiungere un po 'di imbottitura per dargli un po' di peso. Inoltre, ho impostato la posizione su assoluto e gli ho dato un margine negativo in modo che sporga dallo slideshow un po 'sul lato sinistro.Infine, ho aggiunto un'ombra di base per aiutarlo a mostrare colori diversi.
Il problema qui è che, anche se il tag è più alto nella gerarchia HTML, finisce per essere coperto dalla presentazione. Puoi scorgere solo una rapida occhiata tra le diapositive:
Questo è abbastanza facile da risolvere con un po 'di magia z-index. Basta impostare lo z-index del tag su? 1? e quello del bigPhoto div a? -1 ?. Questo farà sì che il tag si trovi in cima alla presentazione.
Prodotto finito: Live Demo
Con quello, abbiamo finito! Sentiti libero di dare un'occhiata alla demo live per vedere la nostra creazione in azione.
Conclusione
Un saluto affettuoso al designer dietro il sito di Jessica per la bella idea di combinare più slideshow. Duplicazione di questo effetto per un ottimo tutorial sull'utilizzo di HTML, CSS e JavaScript per creare presentazioni semplici ma sbalorditive.
Assicurati di andare oltre all'esempio precedente e sperimentare layout ed effetti diversi. Ovviamente, man mano che aggiungi più slideshow, la tua pagina si impantanerà, ma altrimenti sarai limitato solo dalla tua creatività!