Oggi affronteremo la sfida di creare uno striscione animato di foto che scorre automaticamente orizzontalmente attraverso un loop infinito. La parte migliore: lo faremo senza una singola riga di JavaScript.
Per rendere questo banner veramente utile, il nostro obiettivo sarà utilizzare le singole foto rilasciate nel nostro HTML, non semplicemente un lungo background CSS che si ripete. Questo è piuttosto complicato ma ti illustreremo esattamente come funziona. Iniziamo!
L'idea
Il concetto qui è semplice. Diciamo che hai un sito web di fotografia o un portfolio di design e vuoi un semplice banner su una pagina web che scorre automaticamente orizzontalmente attraverso alcune immagini come questa:
Come puoi vedere, in pratica abbiamo solo una striscia di immagini che spostano la loro posizione da sinistra a destra. Questa è una tecnica abbastanza popolare. In effetti, puoi vederlo al lavoro dal vivo sul sito di Gina Meola.
Questo effetto è abbastanza facile con JavaScript o Flash, ma come esercizio vediamo se riusciamo a estrarlo in puro CSS. Con i fantasiosi nuovi strumenti in CSS3 è in realtà un progetto davvero facile che è perfetto per tutti coloro che cercano di immergere il loro dito nell'animazione CSS.
ostacoli
Come promesso, questo è un progetto abbastanza semplice, ma solo perché ho fatto la maggior parte del problema per voi. In realtà, mi ci è voluto un po 'per capire come tirarlo fuori come volevo. La ragione di questo è che c'è un modo semplice e un modo difficile per farlo.
La via facile
Il modo più semplice è prendere le immagini che desideri visualizzare, importarle in Photoshop e combinarle in un'unica immagine lunga. Puoi quindi impostare questa immagine sullo sfondo in CSS, ripeterla sull'asse x e lanciarla in un'animazione CSS.
Funziona bene e sono riuscito a farlo funzionare in pochi minuti, ma il problema è che non è davvero una soluzione versatile. Per esempio, diciamo che volevo collegare ogni singola immagine da qualche parte, questo sarebbe impossibile se fossero in realtà tutte le immagini. Questa stessa logica significa che non posso applicare alcun effetto speciale al passaggio del mouse su singole immagini. Inoltre, se voglio aggiungere o scambiare immagini, è necessario un altro viaggio in Photoshop per aggiornare il file. Questo non è assolutamente l'ideale.
La via difficile
Abbandoniamo la via semplice perché non è né una sfida, né è davvero il metodo migliore per raggiungere il nostro obiettivo. Il modo difficile è inserire effettivamente le immagini una alla volta in HTML e farle assumere la funzionalità banner.
La ragione per cui è così difficile è perché vogliamo che l'animazione sia infinita. In CSS, puoi facilmente ripetere un'immagine di sfondo, ma non c'è alcun metodo per ripetere qualcosa in HTML. Anche se ce ne fossero, vorremmo che una sola immagine fosse ripetuta dopo che tutte le altre erano state renderizzate. Come puoi vedere, è piuttosto l'enigma.
È qui che le animazioni dei fotogrammi chiave vengono in soccorso. La cosa interessante di questo tipo di animazione è che in realtà aumenterà e prenderà in carico la ripetizione infinita per noi? una specie di. Realizza realmente loop dell'animazione, non delle immagini, ma possiamo usarlo per creare l'illusione di immagini che si ripetono all'infinito.
Per vedere come funziona, immagina se abbiamo appena creato una fila di immagini e poi usato i fotogrammi chiave per animarle. Avremo un punto di partenza (0%) e un punto di arresto (100%) come questo:
Come puoi vedere, questo è imbarazzante perché lascia un mucchio di spazio morto indesiderato. Inoltre, quando l'animazione ricomincia, ci sarà un lampo stridente mentre torna all'inizio. Avremo davvero un'animazione infinita, ma sembrerà orribile.
Se hai familiarità con i trucchi di animazione, la soluzione dovrebbe essere già chiara. Quello che dobbiamo fare è far coincidere perfettamente il nostro primo frame con il nostro ultimo frame, quindi quando l'animazione si ripeterà, sarà senza soluzione di continuità e darà l'illusione di un flusso infinito di immagini.
Sfortunatamente, per fare ciò, dovremo ripetere alcune immagini nel nostro HTML. Questo è un po 'un dolore ma non è la fine del mondo e abbiamo solo bisogno di ripetere abbastanza immagini per riempire il fotogramma.
Costruiamolo
Ora che abbiamo elaborato il concetto, è tempo di programmare una demo! Iniziamo con l'HTML di base per la nostra pagina.
HTML
Per costruire una bella pagina demo, includeremo un'intestazione (usa html5shiv per IE) e un testo di riempimento, quindi un div contenente le nostre immagini. Si noti che abbiamo sei immagini uniche, quindi i primi quattro vengono ripetuti. L'iniziale mostra almeno parzialmente le parti di queste quattro foto.
Questo è tutto ciò che c'è da fare! Con questo codice, il tuo banner di immagini inizierà il suo ciclo infinito attraverso le sei foto che abbiamo incluso.
Prenderlo ulteriormente
Per mostrare davvero i vantaggi di questo metodo, ho deciso di fare un ulteriore passo avanti e aggiungere un semplice effetto hover per ogni immagine. Questo sarebbe stato impossibile con la tecnica di background CSS.Al passaggio del mouse, scaleremo l'immagine del 20% e aggiungeremo un'ombra.
dimostrazione
Abbiamo finito! Clicca qui o sull'immagine qui sotto per vedere la versione live.
Conclusione
Abbiamo avuto un obiettivo difficile all'inizio di questo articolo. Volevamo creare un banner infinito di immagini usando puro CSS. La più grande sfida qui è stata come ottenere una serie di immagini HTML da ripetere. Ovviamente, il trucco consisteva nell'impostare un'animazione di fotogrammi chiave assicurandoci che il nostro primo e ultimo fotogramma corrispondessero perfettamente. Questo ci ha permesso di eseguire il loop dell'animazione senza interruzioni.
Lascia un commento qui sotto e facci sapere cosa pensi di questo effetto. Come cambieresti o miglioreresti?