L'idea qui è di creare l'aspetto di una presentazione senza il carosello. In altre parole, stiamo facendo scorrere una serie di immagini da sinistra a destra e ripetiamo una volta raggiunta la fine delle immagini. Il trucco è che stiamo usando una singola immagine di sfondo con animazioni CSS per (...)
L'idea qui è di creare l'aspetto di una presentazione senza il carosello. In altre parole, stiamo facendo scorrere una serie di immagini da sinistra a destra e ripetiamo una volta raggiunta la fine delle immagini.
Il trucco è che stiamo usando una singola immagine di sfondo con animazioni CSS per spostarla sullo schermo e ripetere quando ha finito. Questo crea l'illusione di una galleria di immagini quando usiamo davvero una singola immagine.
Configurazione dell'HTML
Ecco un modello per come deve essere strutturato il nostro HTML:
Ci sono due elementi con cui stiamo lavorando: quello che chiamiamo .containerche si adatta alla larghezza esatta del viewport e un altro che chiamiamo .sliding-backgroundche si trova dietro .containere lo trabocca. In sostanza, stiamo usando .containercome maschera per nascondere l'intera larghezza del .sliding-backgroundmentre scorre sullo schermo.
Ciò significa che dobbiamo creare solo due elementi nel markup HTML:
Posizionamento degli elementi
Andiamo avanti e aggiungiamo alcuni CSS che posizioneranno correttamente i nostri due elementi.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Il nostro .containerutilizza la overflowproprietà che nasconderà tutto ciò che è contenuto visivamente al di fuori di esso. Consideralo come un ritaglio su una fotografia. Potrebbe esserci qualcosa in più fuori dal contenitore, ma il contenitore ci impedisce di vederlo.
È qui che .sliding-backgroundentra in gioco il nostro . È impostato su una larghezza ridicola che supererebbe la maggior parte delle finestre. E questo è il trucco: dovrebbe essere qualcosa che potrebbe traboccare dal contenitore. In questo caso, stiamo utilizzando una 5076pxlarghezza scelta arbitrariamente che dovrebbe superare la maggior parte delle finestre del browser.
Creazione dell'immagine di sfondo
Abbiamo bisogno di un'immagine se stiamo creando l'illusione di una galleria di presentazioni, giusto? Questo è il nostro prossimo ordine del giorno.
Ricordi come abbiamo detto che la 5076pxlarghezza scelta arbitrariamente per lo sfondo scorrevole? Bene, è arbitrario, ma intenzionale nel senso che è ben divisibile per 3, che si adatta alla tempistica per un ciclo di un minuto, che verrà fuori un po 'più tardi. Ciò significa che la tela per la nostra immagine di sfondo è 5076 / 3o 1692px. Alla fine, il nostro background si ripeterà un totale di tre volte in un minuto in un ciclo infinito. Matematica per la vittoria!
L' 500pxaltezza è veramente arbitraria. Può essere quello che vuoi e purché sia anche la dimensione effettiva del file dell'immagine di sfondo.
Il file Photoshop utilizzato per creare l'immagine di sfondo per la demo all'inizio di questo capitolo è disponibile per il download se stai cercando un punto di partenza.
Una volta che l'immagine è stata salvata (e ottimizzata!), Questo è ciò che useremo come immagine di sfondo nel CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Grande! Questo ci dà la gigantesca immagine che trabocca dal contenitore e che ora può essere utilizzata per scorrere lo schermo all'infinito.
Animare lo sfondo
Va bene, facciamo muovere questa cosa. Vogliamo che vada da sinistra a destra in un ciclo che si ripete più e più volte per creare un effetto continuo che l'immagine continui per sempre.
Per prima cosa, definiamo l'animazione CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Stiamo usando la transformproprietà per posizionare l'immagine sinistra sul bordo sinistro del contenitore quando inizia l'animazione, in questo modo:
Quando l'animazione sarà completata, avrà trasformato la posizione negativamente (da sinistra a destra) di una quantità che corrisponde alla larghezza esatta della nostra immagine. E poiché .sliding-backgroundè tre volte la larghezza dell'immagine effettiva, l'immagine si ripete tre volte tra lo 0% e il 100% prima di essere ripetuta di nuovo.
Nota: il motivo per cui utilizziamo un file
background-positionsul principale transformper fare il movimento, che è molto più performante.
OK, concludiamo le cose chiamando la nostra slideanimazione sulla .sliding-backgroundclasse:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )La animationproprietà indica .sliding-backgrounda utilizzare l' slideanimazione e ad eseguirla per un minuto alla volta in un ciclo lineare e infinito.
Mettere tutto insieme
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )