Under de senaste åren har jQuery blivit det enklaste och bästa sättet att implementera enkla animationer online. JavaScript är utomordentligt bra på vad det gör och den här artikeln är inte på något sätt ett argument mot det.
CSS3 erbjuder dock en inblick i en eventuell framtid där grundläggande animeringar utförs med rak CSS helt oberoende av scripting. Idag tar vi en titt på hur man använder CSS3 för att skapa en rolig och unik navigationsmeny som använder @ font-face, transformer och övergångar.
Introduktion
Din webbplatss navigering kan kommunicera mycket om ditt företag eller din tjänst. Ren, användbar navigering är en häftklammer i bra webbdesign och är alltid din säkraste satsning.
Men om du någonsin skapar en webbplats som inte nödvändigtvis måste vara så professionell, ger navigationen ett bra ställe att ha lite roligt och sätta in någon personlighet.
För att få en glimt av vad vi ska bygga, ta en titt på live demo. Jag har lagt till en del platsinnehåll men huvudsidan här är navigeringsmenyn.
Klicka här för att visa demo
HTML
För att starta vårt projekt klistra in i följande tomma HTML5-mall. Lägg märke till att jag har kastat i HTML5 Shiv för att få IE och HTML5 att leka fint tillsammans.
Därefter kastar du en enkel orörd lista i kroppsdelen. Inkludera några länkar och vilken text du vill ha för de enskilda menyalternativen.
Tro det eller inte, det är verkligen allt vi behöver här. Vi kan komma tillbaka och tweak det lite senare men övergripande kommer vår navigationsmeny att vara ganska enkel och lätt att kasta ihop om några minuter.
Grundläggande stilar
Skapa sedan en CSS-fil, utför en grundläggande återställning och lägg till några grundläggande kroppsinställningar. Eftersom det här projektet är så enkelt behöver vi inte en stor CSS-återställning, men det hjälper ofta att alla webbläsare är på samma sida med marginaler och vadderingar.
Nästa sak vi vill göra är att ta vår vertikala lista, få den att flöda horisontellt och lägga till en svängningseffekt. Gör det med följande kod.
Det finns inget här, du har inte sett tusen andra platser. Genom att flyta en oorderad lista kvar lägger vi alla listobjekt på samma rad (kom ihåg att rensa dina floats om du lägger till mer innehåll!). Annat än detta har vi helt enkelt åtskilda elementen och applicerat en svängfärg.
Vi lägger till mer avancerade svängareffekter senare men det är viktigt att vi inte helt är beroende av dem. Om vi vill ha graciös försämring över webbläsare ska menyn vara helt funktionell utan någon CSS3. Som du kan se i bilden nedan har vi fått det målet och bör nu ha en enkel textbaserad meny som ändrar färg på svävaren.
Anpassa teckensnittet
Eftersom vi bara har roligt vill jag använda en galen typsnitt. Mitt favoritalternativ för att implementera anpassade teckensnitt på nätet är rent @ font-face med Paul Irlands Bulletproof @ font-face syntax.
På så vis behöver vi inte oroa oss för system från tredje part, domän, registrering etc. Vi kan helt enkelt hitta ett typsnitt som vi gillar och kasta det rakt in via CSS.
Font ekorre
Att ställa in teckensnitt med @ font-face är inte den enklaste uppgiften om du är nybörjare. Först måste du hitta ett teckensnitt som är lagligt att använda (vilket kan vara en stor huvudvärk), då måste du spåra flera versioner av typsnittet och ansluta dessa versioner till Bulletproof Syntaxen. det är en verklig smärta.
Lyckligtvis har Font Equirrel tagit nästan allt arbete ur processen med sina pre-built @ font-face-kit.
Ett @ font-face-kit innehåller allt du behöver: teckensnitt, kod, ett exempel etc. Bläddra bara igenom webbplatsen tills du hittar ett kit som du gillar och klicka på hämtningsknappen. Jag bestämde mig för att gå med Kulminoituva under "nyheten"? sektion. Det är en galen 3D-blockbokstav som jag normalt inte skulle använda så det är perfekt för det här projektet.
När du har laddat ner satsen kopierar du teckensnitt till din sidors rotkatalog och förbi den medföljande texten i din CSS-fil.
Om du följde den kollisionssäkra syntaxlänken ovan bör du veta vad all den här koden gör. Om inte, det enda du verkligen behöver veta är att den första raden berättar hur man hänvisar till teckensnittet någon annanstans i vår kod: "KulminoituvaRegular"
Så nu tillämpar vi en teckensnittsfamilj på listobjekten med samma metod som vi normalt skulle använda när vi använder vårt nya teckensnitt som standard.
Och nu ska vår navigationsmeny se mycket roligare ut.
Vi har nu en ganska anständig liten navigationsmeny. Observera att vi också använde vissa säkerhetskopia typsnitt så att överallt @ font-face inte fungerar, kommer Helvetica att laddas istället.
För att avsluta det, låt oss kasta in några CSS3-animeringar.
Animera menyn
För närvarande är det bästa sättet att göra CSS-animationer en tvåstegsprocess som innefattar både omvandlingar och övergångar. Så det första vi vill göra är att bestämma hur man ska manipulera objekten i vår meny med hjälp av en transformation, då applicerar vi en övergång för att animera transformationen.
Om du tittar på det teckensnitt vi har valt ser du att bokstäverna är alla roterade fram och tillbaka för att ge det en slarvig handdragen slags känsla. Vi använder detta som inspiration för vår omvandling och introducerar lite mer rotation när användaren svänger över en länk. För att ge ännu mer tonvikt introducerar vi också en skaleringseffekt.
Förvandla texten på Hover
Med CSS-transformer har vi fyra grundläggande alternativ: rotera, skala, skew och translate (flytta vänster och höger). Eftersom vi inte vill att vår text ska bli allt skev eller flytta för mycket, kommer vi hålla fast vid att rotera och skala.
Syntaxen för att implementera dessa är super grundläggande och bekvämt identisk över Mozilla, Webkit och Opera versioner.
Som du kan se tillämpade vi helt enkelt en rotation på -10 grader och en liten skalning av 1,2. Nu när du svävar över en länk i navigeringen ska den visas roterad och större.
Efter att ha spelat lite här bestämde jag mig för att jag inte tyckte om att alla länkar roterade på samma sätt. Texten känns lite mer slumpmässig än så jag ville introducera lite variation här.
Lösningen är att tillämpa klasser på listobjekten i vår HTML så att vi kan utforma några oberoende av andra.
Nu när vi har två olika klasser kan vi applicera en separat rotation till varje annan länk så att de första och tredje länkarna roterar moturs och den andra och fjärde länkarna roterar medsols.
Voila! Nu har vi en fantastisk svängningsrotation effekt. Det sista vi vill fixa är övergången. För närvarande svävar över texten en omedelbar rotation. Vi vill att detta ska vara gradvis som du skulle hitta i en cool jQuery-effekt.
Animerar rotationen
Vårt sista steg är att lägga till i en CSS3-övergång för att animera svängningseffekten. Som med transformer är övergångar mycket enkla att implementera och innehåller samma grundläggande syntax för Webkit, Mozilla och Opera.
Allt du behöver göra är att ställa in egenskapen som du vill animera (i det här fallet? Allt?), Varaktighet och lättnad. Du kan välja mellan lätthet, linjär, inlämning, lätthet och lätthet. Dessa påverkar hur animeringen ramper upp och saktar ner.
Som du kan se tillämpade vi samma övergång till båda klasserna. Känn dig fri att variera detta om du önskar och ändrar övergången i den första eller andra klassen.
Allt klart!
Det kompletterar vår navigationsmeny. Klicka här för att se live demo. Kom ihåg att du kan använda dessa animeringstekniker på vad du vill, inte bara text. Prova att skapa ett miniatyrgalleri eller något annat bilddrivet som använder samma effekt.
Slutsatser
Självklart kommer IE-användare bara att uppleva en vanlig meny (även om det blir fullt fungerande). Du är definitivt bättre med JavaScript om du vill ha animeringar så här för att fungera över alla webbläsare. Texten tenderar dessutom att bli lite hakig i Webkit under övergången. Jag tyckte att det här var ganska irriterande men kunde inte räkna ut en fix (låt mig veta om du gör det!).
Trots några argument mot användningen är CSS-animationer definitivt roliga att leka med och extremt lätta att implementera. Lämna en kommentar nedan med en länk till några coola CSS3-animationer du har skapat tillsammans med en kort beskrivning av de egenskaper du använde.