Denna designteknik finns vanligen på personliga portföljer eller designstudios webbplatser. Färdighetsstänger representerar en kunskapsnivå som är relaterad till vissa uppgifter - webbdesign, illustration, branding, karaktärsdesign, du heter det! Att lägga till några fina animeringar till dessa färdighetsstänger ger en snabbare anslutning till tittaren.
I denna handledning vill jag demonstrera hur du kan bygga CSS3 färdighetsstänger med hjälp av keyframe animation. Detta är också helt möjligt att köra med hjälp av JavaScript, vilket skulle hålla sig starkare i äldre äldre webbläsare. Men CSS3 keyframes växer i popularitet med mycket större stöd idag. Ta en titt på min live-demo för att se slutprodukten.
Live Demo - Hämta källkod
Komma igång
När du surfar via Google snubblat jag på det här inlägget och redogjorde för CSS3-animeringsstilen. Det är faktiskt ganska enkelt när du förstår egenskaper och hur animationen / nyckelbilderna fungerar tillsammans. Min sida använder en enkel HTML5-doktyp med ett externt CSS-stilark.
Först bör vi titta på HTML-markupen och hur det här skapar en aktiv dynamisk bar. Sidan innehåller två olika sektioner - en med inre etiketter och en utan etiketter. Eftersom alla färdighetsstängerna använder nästan identisk kod har jag kopierat bara den första fältet på sidan.
Div #kompetens används för att inkapslera hela samlingen av färdigheter. Detta beter sig som ett omslag så att vi kunde centrera allt, öka / minska bredden eller justera andra inställningar i CSS. Den inre div med en klass .skicklighet wraps runt varje individuell färdighet som mäts. I det här fallet tittar vi på HTML5 / CSS3-kodning som rankas på 100% kunskap.
Den inre H3-huvudet är på plats så tittaren kan berätta vad färdigheten mäter. Detta kunde placeras inuti färdighetsfältet istället, men jag valde att lägga upp många års erfarenhet inne i baren. Du kommer märka att den animerade stapeln själv finns i ett yttre skal.
Spännelementet .bar använder en statisk grå bakgrund med några boxskuggseffekter som står ut på sidan. Den var utformad på ett liknande sätt som CSS-däckexemplet, men jag har försökt att förenkla HTML-en. Den inre spänningen .skillbar är där animationen händer.
Animera individuella färdigheter
Du märker var och en .skillbar har också en sekundär klass relaterad till färdigheten som mäts. Dessa är kopplade till CSS3-animeringar som körs över nyckelbilder. Varje färdighet mäts separat och de stannar vid en annan punkt (HTML / CSS händer bara för att nå 100%).
Eftersom jag använder klasser för dessa färdighetsstänger kan vi faktiskt duplicera dem många gånger på sidan. Så skapade jag en annan uppsättning exempel på samma sida - genom att återanvända samma animerade klasser. Eftersom dessa staplar också innehåller små bitar av text kan de inte starta vid 0px bredd. Normalt är det bra men i det här fallet skulle texten bryta sig till nästa rad, och bara en gång baren animerar skulle texten ersätta sig själv.
Så att ha enskilda klasser betyder att jag kan ställa in originalbredden för att matcha intern textlängd. På så sätt bryts det aldrig eller visas buggy, och texten stannar alltid centrerad i färdighetsfältet, oavsett hur stor den animerar.
Placering av elementen
Mina grundläggande CSS-egenskaper är inte för komplicerade men det finns några idéer som är värda att diskutera. Jag börjar med den övergripande strukturen hos behållaren för färdighetsstänger.
Den yttre .bar behållaren använder en fast bredd / höjd-värde för att se till att allt ser ut på samma sätt i alla webbläsare. Det inre .skillbar håller ett höjdvärde med text, men i det andra exemplet kommer de inte bara att visas eftersom de är tomma. Vi måste använda 100% höjd på alla inre färdighetsstänger för att se till att de visas ens utan innehåll.
Den centrerade texteffekten är också ganska cool eftersom det interna innehållet kommer att animera tillsammans med baren själv. Du kanske inte gillar den här effekten och det är ganska enkelt att ändra justeringen. Men om du överväger hur lätt det här är, kan du börja brainstorma nya koncept för att prova.
Animeringsfyllningslägen
När jag först började animera elementen, skulle varje stapel avsluta animeringen och sedan automatiskt tillbaka till 100% bredd. Det var självklart inte min avsikt så jag gick på jakt efter en lösning.
Jag läste att vi kan ställa in en standardbredd på den ursprungliga klassen som .htmlcss så slutar det med 100% bredd när animationen är klar? eller i fallet med jQuery skulle klassen ha en bredd på 55%. Jag anser att detta nästan besegrar syftet att behöva kopiera över breddvärdet två gånger. Då fick jag reda på fyllningsmetoder som var något jag aldrig hört talas om tidigare.
Fyllningslägen berättar för animeringen hur man använder stilar före och efter avslutad tid. Använda sökordet framåt kommer att tvinga varje element att behålla CSS-stilar som hittades i den senaste keyframen. Så i det här fallet kör vi en annan animering för varje klass, och varje animering har en startposition på 0% följt av en 100% färdigställd position. Jag visste aldrig när animationen slutförde att det skulle återgå till de ursprungliga stilerna.
Om du vill läsa lite mer på fill-lägen, kolla in den här artikeln av Mozilla, som delas in i större detalj. Konceptet är väldigt enkelt, men jag kan förstå hur en ny utvecklare som provar CSS3 keyframe-animationer inte skulle veta något om det.
Finalisering av nyckelramar
Det sista kvarteret med kod jag vill dela är keyframes själva. Vi ger varje keyframe setup ett unikt namn som representeras av den tidigare animering egenskaper. Jag använder CSS3 prefix för -moz och -webkit för att hantera överensstämmelse med så många webbläsarversioner som möjligt. Du kommer märka att animationerna delas upp i block grupperade av animeringsnamnet:
Du kommer också märka att varje animering endast använder startposition och färdig position, som alla ska animera inom 1,5 sekunder. Några av startpositionerna använder 35px eller 45px för att helt inkapslera etiketttexten. Du kan ändra detta värde till 0px om du inte vill ha någon text som finns i kompetensfältet själv.
Annat än dessa stilar borde allt annat vara ganska välkänt. Det sista stora avsnittet i mitt stilark omdefinierar de inre gradienterna för varje färdighetsfält - utan etiketter du kan försöka med att inkorporera färger för att skilja mellan färdighetssätt. Det är därför mina sekundära uppsättning färdighetsfält innehåller också en .alt klass.
Live Demo - Hämta källkod
Stängning
Det finns många andra fantastiska handledning där ute som täcker detta ämne och andra keyframe-animeringar. Många bra kodprover finns på webbplatser som CodePen och JSFiddle om du har tid att söka.Båda mina exempel med inre textetiketter, eller bara standardprocenterna, kan fungera i någon liknande webbdesign.
Var kreativ med dessa animeringar för att se hur de kunde passa in i andra framtida webbprojekt. Du kan också ladda ner min källkod för självstudier och försöka bygga mer komplexa animationer.