Idag ska vi gå in på utmaningen att skapa en animerad banner med bilder som automatiskt rullar horisontellt genom en oändlig loop. Den bästa delen: vi ska göra det utan en enda rad av JavaScript.
För att göra denna banner verkligen användbar, kommer vårt mål att vara att använda enskilda bilder som släppts in i vår HTML, inte bara en lång CSS-bakgrund som upprepas. Det här är ganska knepigt men vi går igenom dig exakt hur det fungerar. Låt oss börja!
Idén
Konceptet här är enkelt. Låt oss säga att du har en fotograferingswebbplats eller en designportfölj och vill ha en enkel banner över en webbsida som automatiskt rullar horisontellt genom några bilder så här:
Som du kan se har vi i princip bara en remsa bilder som flyttar sin position från vänster till höger. Detta är en ganska populär teknik. Faktum är att du kan se det på jobbet live på Gina Meolas webbplats.
Denna effekt är lätt nog med JavaScript eller Flash, men som en övning får vi se om vi kan dra av den i ren CSS. Med de snygga nya verktygen i CSS3 är det faktiskt ett riktigt enkelt projekt som är perfekt för alla som vill dipa sin tå i CSS-animering.
häck
Som lovat är det här ett ganska enkelt projekt, men bara för att jag har gjort det mesta av problemlösningen för dig. I själva verket tog det mig ett tag att räkna ut hur man drar av det som jag ville. Anledningen till detta är att det finns ett enkelt sätt och ett svårt sätt att göra det.
Det enkla sättet
Det enkla sättet är att ta bilderna som du vill visa, importera dem till Photoshop och kombinera dem sedan till en lång bild. Du kan sedan ställa in den här bilden till din bakgrund i CSS, upprepa den på x-axeln och kasta i en CSS-animering.
Det fungerar bara bra och jag kunde få igång på bara några minuter, men problemet är att det verkligen inte är en mångsidig lösning. Låt oss säga att jag ville länka varje enskild bild någonstans, det skulle vara omöjligt om de var i verkligheten en enda bild. Samma logik innebär att jag inte kan tillämpa några speciella hovereffekter på enskilda bilder. Om jag vill lägga till eller byta ut bilder behöver jag också en annan resa till Photoshop för att uppdatera filen. Detta är definitivt inte idealiskt.
Den svåra vägen
Låt oss gräva på det enkla sättet, eftersom det inte är en utmaning, och det är inte heller den bästa metoden för att uppnå vårt mål. Det svåra sättet är att faktiskt infoga bilderna en i taget i HTML och få dem att ta på bannerfunktionaliteten.
Anledningen till att detta är så svårt är att vi vill att animationen ska vara oändlig. I CSS kan du enkelt upprepa en bakgrundsbild, men det finns ingen metod för att upprepa något i HTML. Även om det fanns skulle vi bara vilja ha en bild att upprepa efter att alla de andra gjordes. Som du kan se är det ganska conundrum.
Det är här som keyframe-animationer kommer till räddningen. Det intressanta med denna typ av animering är att det faktiskt kommer att stiga upp och ta ansvar för den oändliga upprepningen för oss? ungefär. Det slår verkligen animationen, inte bilderna, men vi kan använda det för att skapa illusionen av oändligt upprepande bilder.
För att se hur detta fungerar kan du föreställa dig om vi bara har skapat en rad bilder och sedan använt nyckelbilder för att animera dem. Vi har en startpunkt (0%) och en stopppunkt (100%) så här:
Som du kan se är det besvärligt eftersom det lämnar en massa oönskade dödrymder. Vidare, när animationen börjar över, kommer det att bli en glittrande blixt eftersom den går tillbaka till början. Vi har faktiskt en oändlig animation, men det kommer att se hemskt ut.
Om du känner till animationstryck ska lösningen vara klar redan. Vad vi behöver göra är att göra vår första ram perfekt matchar vår sista bild, då när animationen upprepas kommer den att vara sömlös och ge illusionen av en oändlig ström av bilder.
Tyvärr, för att göra detta måste vi upprepa några bilder i vår HTML. Det här är typ av smärta men det är inte världens ände och vi behöver bara repetera noga bilder för att fylla i ramen.
Låt oss bygga den
Nu när vi har konceptet utarbetat är det dags att koda en demo! Låt oss börja med den grundläggande HTML-filen för vår sida.
html
För att bygga en bra demosida kommer vi att inkludera en rubrik (använd html5shiv för IE) och lite fyllnadstext, sedan en div som innehåller våra bilder. Observera att vi har sex unika bilder, så de första fyra upprepas. Initialen visar åtminstone delvis bitar av dessa fyra bilder.
Det är allt det finns! Med den här koden börjar din banner av bilder sin oändliga loop genom de sex bilder som vi inkluderade.
Ta det vidare
För att verkligen visa upp fördelarna med den här metoden bestämde jag mig för att gå ett steg längre och lägga till en enkel svängningseffekt för varje bild. Detta skulle ha varit omöjligt med CSS-bakgrundstekniken.På svävar ska vi skala bilden med 20% och lägga till en skugga.
demo
Vi är alla färdiga! Klicka här eller på bilden nedan för att se liveversionen.
Slutsats
Vi hade ett svårt mål i början av denna artikel. Vi ville skapa en oändligt rullande banner med bilder med ren CSS. Den största utmaningen här var hur man får en massa HTML-bilder att repetera. Tricket var förstås att skapa en nyckelram animation samtidigt som du försäkra dig om att våra första och sista ramar matchade perfekt. Detta gjorde att vi kunde seamlessly loop animeringen.
Lämna en kommentar nedan och låt oss veta vad du tycker om denna effekt. Hur skulle du ändra eller förbättra det?