Tanken här är att skapa ett bildspel utan karusellen. Med andra ord gör vi en serie bilder som bilden glider från vänster till höger och upprepas när slutet på bilderna har nåtts. Tricket är att vi använder en enda bakgrundsbild med CSS-animationer för att (...)
Tanken här är att skapa ett bildspel utan karusellen. Med andra ord gör vi en serie bilder som bilden glider från vänster till höger och upprepas när slutet på bilderna har nåtts.
Tricket är att vi använder en enda bakgrundsbild med CSS-animationer för att flytta den över skärmen och upprepa när den är klar. Detta skapar illusionen av ett bildgalleri när vi verkligen använder en enda bild.
Ställa in HTML
Här är en ritning för hur vår HTML behöver struktureras:
Det finns två element som vi arbetar med: det vi ringer .containersom passar den exakta bredden på visningsområdet och ett annat vi ringer .sliding-backgroundsom sitter bakom .containeroch flödar över det. I huvudsak använder vi den .containersom en mask för att dölja hela bredden på den .sliding-backgroundnär den rullar över skärmen.
Det betyder att vi bara behöver skapa två element i HTML-markeringen:
Placera elementen
Låt oss fortsätta och lägga till lite CSS som korrekt placerar våra två element.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Vår .containeranvänder overflowegenskapen som döljer allt som är visuellt inneslutet utanför det. Tänk på det som en skörd på ett fotografi. Det kan finnas extra saker utanför behållaren, men behållaren hindrar oss från att se den.
Det är där vårt .sliding-backgroundspelar in. Det är inställt på en löjlig bredd som skulle flyta över de flesta visningsportar. Och det är tricket: det borde vara något som skulle flyta över behållaren. I det här fallet använder vi en något godtyckligt vald 5076pxbredd som borde flyta över de flesta webbläsarvyer.
Skapa bakgrundsbilden
Vi behöver en bild om vi skapar en illusion av ett bildspel galleri, eller hur? Det är vår nästa order.
Kom ihåg hur vi nämnde att den något godtyckligt valda 5076pxbredden för den glidande bakgrunden? Tja, det är godtyckligt, men avsiktligt i den meningen att det är snyggt delbart med 3, vilket passar in i tidpunkten för en minutslinga, som kommer upp lite senare. Det betyder att duken för vår bakgrundsbild är 5076 / 3eller 1692px. I slutändan kommer vår bakgrund att upprepas totalt tre gånger på en minut i en oändlig slinga. Matematik för att vinna!
Den 500pxhöjden är verkligen godtyckligt. Det kan vara vad du vill och så länge det också är den faktiska storleken på bakgrundsbildfilen.
Photoshop-filen som används för att skapa bakgrundsbilden för demo i början av detta kapitel är tillgänglig för nedladdning om du letar efter en startpunkt.
När bilden har sparats (och optimerats!) Är det här vi ska använda som bakgrundsbild i CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Bra! Det ger oss den enorma bilden som flyter över behållaren och kan nu användas för att bläddra över skärmen ad infinitum.
Animera bakgrunden
Okej, låt oss flytta den här saken. Vi vill att den ska gå från vänster till höger i en slinga som upprepas om och om igen för att skapa en sömlös effekt som bilden fortsätter för alltid.
Låt oss först definiera CSS-animationen:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Vi använder transformegenskapen för att placera den vänstra bilden vid behållarens vänstra kant när animeringen börjar, så här:
När animeringen är klar kommer den att ha transformerat positionen negativt (från vänster till höger) med en mängd som matchar den exakta bredden på vår bild. Och eftersom det .sliding-backgroundär tre gånger bredden på den faktiska bilden upprepas bilden tre gånger mellan 0% och 100% innan den slingras igen.
Obs: anledningen till att vi använder en extra
background-positionpå huvudet transformatt göra rörelsen, vilket är mycket mer performant.
OK, låt oss avrunda saker genom att ringa vår slideanimation till .sliding-backgroundklassen:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )Den animationegenskapen instruerar .sliding-backgroundatt använda slideanimation och att köra det under en minut i taget i en linjär, oändlig loop.
Få alltid att falla på plats
.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); ) )