Dagens projekt är dumt och roligt, men det har en riktig poäng och pedagogisk syfte. I en nyartikel undersökte jag fem sätt att använda flera CSS-bakgrundsbilder för att skapa svarta svängareffekter. Jag hade en idé i den artikeln som jag inte kom till helt enkelt för att dess komplexitet gav upphov till en fristående förklaring.
Denna artikel är sedan en förlängning av den tidigare diskussionen. Vi använder flera bakgrunder för att skapa en cool filmisk effekt där någon traverserar en karta medan utsiktspunkten zoomar ut. Det bästa och mest nörd-smakfulla sättet att visa upp detta är självklart att använda den välbekanta berättelsen om Frodo-korsningen Middle Earth för att komma fram till Mount Doom i Mordor. Låt oss börja.
Konceptet
Grundtanken för den här svängningseffekten är enkel. Det finns en behållare med två olika bakgrunder. Den på botten av stapeln fyller hela behållaren, den på toppen av stapeln är mycket mindre. På svävaren går den fulla blöderbilden (som faktiskt sträcker sig långt bortom behållaren) till vänster medan den lilla bilden rör sig rätt. Det här är en super grundläggande animeringsteknik som gör att det ser ut att motivet rör sig genom scenen.
För att göra sakerna ännu mer intressanta vill jag att scenen börjar med en zoomad mot motivet och sedan panorera ut för att se landskapet som helhet.
Varför Middle Earth?
Den mest praktiska användningen som jag kunde tänka mig för denna idé var att visa någon som rörde sig över en karta. Detta är ett ganska typiskt användningsfall. Oavsett om ditt företag ändrats bara platser eller din familj bara gick på semester, så är det ganska lätt att komma med en anständig ursäkt för att genomföra en rolig kartanimation.
? Känn dig roligt med mig i kommentarerna, efter att ha sett demoen, försäkrar min fru mig att jag förtjänar det.?Nu, med tanke på att jag är en stor nörd som är helt upphetsad över den kommande filmen, "The Hobbit"? mitt sinne hoppade omedelbart till en scen från Middle Earth. Följaktligen utvecklades dagens projekt till ett hatten tips till den senaste filmiska hobbit resan. Känn dig roligt med mig i kommentarerna, efter att ha sett demoen, försäkrar min fru mig att jag förtjänar det.
Varför flera bakgrundsbilder?
Kan vi göra detsamma med bilder som släppts in i vår HTML? Japp. Skulle det ge oss ännu mer frihet att manipulera bilderna? Det kan du ge dig på.
Varför använder vi inte HTML? Eftersom hela punkten i övningen är att lära sig att använda flera bakgrundsbilder i CSS, det är därför! En dag blir du tvungen att koda något med flera bakgrundsbilder och du kommer lyckligtvis veta allt om dem.
Se den i aktion
Innan vi börjar bygga, låt oss ta en titt på vad vi försöker skapa. Klicka nedan för att kolla in den färdiga produkten.
demo: Klicka här för att starta liveversionen.
Komma igång: HTML
Detta experiment använder alla CSS med minimal uppmärksamhet. Allt du behöver för hela projektet är en enda tom div. Det är allt!
Självklart kan du lägga till text och andra objekt för att göra objektet mer komplext men för dagens ändamål, det här är all HTML som vi behöver.
Storlek Upp Div
Innan vi fortsätter med någonting annat, måste vi bestämma oss för en storlek för vår div. Detta kommer att påverka alla övriga beslut. Jag valde en bra storlek rektangel: 500px bred vid 375px lång. Jag centrerade sedan den på sidan och släppte den ner från toppen av sidan med 20px.
Förbered dina bilder
För att följa med behöver du två bilder: en karta och ett ämne. Du kan använda allt du vill, men jag valde de två bilderna nedan för orsaker som redan förklarats:
Min Middle Earth-karta är ganska stor: 1000px med 750px och min Frodo-bild är ganska liten: 100px med 100px.
Planera animationen
Nu när vi har våra bilder måste vi noga tänka på vad det är som vi försöker göra. Självklart börjar Frodo sin resa i The Shire, så vi måste zooma in på nordvästkvadranten på kartan och placera den lilla bilden någonstans i det området.
Han gör sedan en resa till Mordor, som ligger i sydöstra kvadranten, så vi vill att Frodo ska flytta ner och till höger i en diagonal linje. I början av animationen vill vi zoomas in på The Shire, men i slutet av animationen vill vi se hela Middle Earth. Här är de två staterna för vår kartstorlek:
- Börjar kartstorlek: 1000 med 750 pixlar (full storlek)
- Slut kartstorlek: 500 med 375 pixlar (div-storleken)
Frodo behöver också ändra storlek eftersom vi zoomar ut. Eftersom siffrorna ovan har utvecklats för att perfekt klippa bildstorleken i halv så följer vi här:
- Börjar Frodo Storlek: 100 med 100 pixlar (full storlek)
- Sluta Frodo Storlek: 50 till 50 pixlar (halvstorlek)
Vi måste också placera bilderna, men det är lättare att göra på flugan när vi sätter in dem så låt oss gå vidare till det steget.
Lägg in bilderna
Nu är det dags att kasta bilderna i vår div. Det fantastiska med att använda flera bakgrunder är att du inte behöver några gala leverantörs prefix, du behöver inte ens verkligen lära dig nya syntaxer, bara släpp en bild som alltid, sätt in ett komma och släng sedan i en annan bild.
Här har jag kastat i en del rader för klarhet. De lägger till extra utrymme, men hjälper till att hålla koden läsbar. Tänk på att staplingsordningen i koden representerar staplingsordningen i liveversionen. Här är kartan längst ner och ämnet är överst, vilket är exakt vad vi behöver (det här är allt i #middleEarth-väljaren).
Här är vad detta ger oss:
Den goda nyheten är att kartan är som standard placerad med övre vänster som sitt ursprung, vilket är exakt vad vi vill ha. Den dåliga nyheten är att Frodo är placerad på samma sätt så vi måste flytta honom över till The Shire för att börja.
För att placera Frodo-bilden lägger du bara till i ett horisontellt och vertikalt läge efter? Nej-repetera? bit. Det bästa sättet att göra detta är bara att experimentera och se vad som fungerar. Jag kom upp med 150px 150px, vilket sätter honom bredvid etiketten för The Shire.
Vår första inställning är nu rätt där vi vill att den ska vara.
Använda separata bildstorlekar
För att säkerställa att animationen fungerar mer, måste vi se till att vi får några viktiga saker rätt. Ett viktigt steg är att förklara våra bakgrundsbildstorlekar.
Dessa är inte nödvändiga först eftersom vi helt enkelt använder standardstorleken, men vi kan inte animera ändringen utan att uttryckligen ange start- och stoppparametrarna. Vi använder helt enkelt background-storlek egendom med och släng i ett komma för att skilja värdena. Precis som vid införandet av bilderna kan vi unikt manipulera motsvarande egenskaper hos varje bild med ett kommatecken.
Hover Styles
På svävar måste Frodo gå till Mordor när kartan börjar zooma ut. Vi har redan funnit det mesta av vad vi behöver göra detta. Den här gången måste våra bakgrundsstorlekar vara 50px med 50px och 500px med 375px (krymper Frodo, zoomar ut för att visa hela kartan). Vi måste också flytta Frodo ner till Middle Earth så att vi vrider upp den horisontella och vertikala växeln till 400px respektive 240px.
Detta sätter bra gamla Frodo rätt i hjärtat av Mordor.
Slutsteg: Animationen
Nu har vi vår utgångspunkt och vår stopppunkt är upptagen, allt som finns kvar är animationen. Naturligtvis använder vi CSS-övergångar för detta. CSS-keyframe-animationer skulle vara mycket roligare och tillåta oss att göra mycket mer (som att göra lämpliga stopp under vägen), men de är inte så brett stödda så vi måste hålla fast vid övergångar.
På svävar vill jag att resan ska vara snäll och lång, ungefär fem sekunder. När du slutar sväva, ska animationen vända tillbaka till var den startade. Men jag vill att det ska bli mycket snabbare här, ungefär en sekund.
För att uppnå detta måste vi inrätta två separata övergångar. Den första går in i #Midgård väljaren och är inställd på en sekund. Otroligt nog, detta kommer att styra musen ut animering. Den andra övergången går in i #middleEarth: hover väljaren, detta styr mus-in-animationen.
Här är vår färdiga CSS, som visar allt du behöver för att få allt att fungera:
Slutsats
Med det är vi alla färdiga! Du borde nu känna till massor av bra saker om att använda flera bakgrunder: hur man applicerar dem i rätt ordningsföljd, placera dem självständigt och animera varje bilds storlek och position.
Var noga med att ta en titt på demoen för att se projektet i aktion och meddela vad du tycker i kommentarfältet nedan.