Samtidigt som jag spelade med Webkit Keyframe Animations fann jag ut ett sätt att skapa en fantastisk liten bildreglage med bara CSS. Det är definitivt lite okonventionellt men det är ett bra sätt att lära sig att tänka utanför rutan med vad du kan göra med CSS3.
Tänk på att eftersom vi använder Webkit Keyframes är detta bara ett pedagogiskt experiment och fungerar bara i Safari eller Chrome. Eftersom fler webbläsare börjar stödja keyframe-animationer i framtiden, bör den här metoden bli perfekt användbar i dina egna webbprojekt.
Vad vi bygger
Bildspel Live Demo: Klicka här
Porthole Live Demo: Klicka här
Varför ren CSS?
Innan någon blir för upphetsad vill jag erkänna att det här är ett jobb för JavaScript. Även om vissa sällsynta och förvirrade själar bläddra med JavaScript avstängd, kommer det att lämna ut en mycket lägre andel av din publik än dagens metod.
Med det sagt tycker jag att det är viktigt och till och med kul att experimentera med kommande tekniker för att se hur vi ska kodning inom en snar framtid. Som vi såg i vår senaste artikel om att skapa färgfulla pulserande bakgrunder, sträcker Webkit Keyframe Animations verkligen vad som är möjligt med CSS och är faktiskt ganska lätt att arbeta med.
Komma igång: Grundläggande HTML
Till att börja med, låt oss skapa sidan som om den bara innehöll statiska element. Vi kommer inte att oroa oss för mycket om att skapa en komplex sidoproduktion denna gång, bara en enkel behållare med bildspelet och en rubrik.
Med det i åtanke är markeringen för detta projekt super enkel:
Efter detta borde du inte ha något mer än en vit sida med lite text på den:
Grundläggande CSS
Nu när vi har vår markering alla upplagda, är det dags att börja utforma sidan för att få den att bli presentabel. Det första jag ska göra är att kasta in en grundmarginal / vadderingsåterställning, applicera en bakgrund till kroppen och centrera behållaren.
Återställningen hjälper helt enkelt till att rensa alla förinställda webbläsare och att centrera div är lika enkelt som att applicera en bredd och ställa in vänster och höger marginal till automatiskt.
Styling Texten
Nu när vår bakgrund och behållare är inställda, låt oss få rubriken att se lite bättre ut. Vår markering skapade tre avsnitt att arbeta med: rubrik div, h1 och stycket.
Jag började med att använda några marginaler till hela diven med att centrera vilken text som helst inom och ställa in standardfärgen till vit. Efter detta tillämpade jag en del grundläggande typsnittstilstilning (med stenografi) till h1- och stycke-taggarna.
Observera att jag har använt 'Josefin Sans' för teckensnittet. Det här är från Google Font-biblioteket, så att det fungerar, se till att du har den här siten i huvuddelen av HTML-koden.
Och med det börjar vår sida se mycket snyggare ut!
Styling av bilden
Nu måste vi tillämpa en bakgrund till bildspelet div. I nästa steg kommer vi göra mycket mer med detta men för nu vill du i princip bara välja en platshållare och tillämpa bredd och höjd på div.
Vår sida ser bra ut nu. Nu när vi har det hur vi vill kan vi fortsätta med att få det till liv!
Ställa in bildspelet
Det sätt på vilket vi kommer att sätta upp detta bildspel är i grunden genom användningen av en modifierad version av CSS sprites. Tanken är att skapa en stor bild som innehåller alla våra diabilder och sedan använda keyframe-animationer för att visa specifika delar av bilden vid vissa punkter i animationen.
Om det inte är så meningslöst, oroa dig inte, det är mycket lättare än du tror! För att börja, måste vi gå in i Photoshop och bygga vår bild. Nu, med tanke på att storleken vi satt upp för bildspelet är 465 px bred vid 300 px långa, måste vi göra vårt Photoshop-dokument 930px med 600px (dubbelt både bredden och höjden). Detta ger oss tillräckligt med utrymme för fyra bilder, om du vill ha mer, gör det bara större!
Härifrån vill du släppa in fyra bilder, varav 465px med 300px. Ställ in dem i ett nät utan luckor och spara en JPG i full storlek. Ditt resultat ska se ut som bilden nedan.
Bildspel CSS
Webkit Keyframe Animationer är verkligen enkla att arbeta med. Allt du behöver så är att välja något att animera och sedan ange tillståndet för det objektet på olika punkter i animationen, definierad av procentandelar. Så om du ställer bredden på en div till 100px vid 0%, 50px vid 50% och 10px vid 100%, kommer diven att krympa under animeringens gång.
Idag kommer vi att animera egenskapen bakom positionen. Vårt bildspel är upprättat för att bara visa den övre vänstra kvadranten i vår bild som standard och vi kan använda bakgrundsposition för att flytta runt för att visa de andra.
För att visualisera detta, bild vår webbsida som en mörk bakgrund med ett rektangelhål i det. Den bild som vi just skapat ställs sedan under det hålet och vi ska flytta runt den.
Först vill vi gå från den övre vänstra bilden till den högra högra bilden, så vi ska ställa in? värde (det första numret) till den negativa bredden på en bild (465px). Därefter sätter vi upp? värde (det andra värdet) till den negativa höjden på en bild (300px). Slutligen håller vi oss på -300 på höjden men ger rätt värde tillbaka till noll. Effekten av detta kommer att vara att visa den övre vänstra bilden, den högra högra bilden, den nedre högra bilden och sedan den nedre vänstra bilden.
Lägg märke till att jag kastade en bit av en kurvboll här och sätta allt till 0 på 10%. Detta beror på att jag inte gillade bildspelet direkt utan att ge dig chansen att titta på den första bilden. Detta bygger helt enkelt på en kort paus.
Ett av de viktigaste inslagen här är också syntaxen i början:? @ - webkit-keyframes-reglaget ?. The @ @ - webkit-keyframes? del berättar webbläsaren vad du definierar med koden nedan men? skjutreglaget? del är en anpassningsbar titel som du ger animeringen. Det kan vara allt du vill, kom ihåg att använda det igen i nästa steg när vi aktiverar den här animationen.
Aktiverar bildspelet
Kasta i CSS ovan definierar bildspelets beteende, men det aktiverar inte det. För att göra det måste du lägga till en ny rad i ditt bildspel.
Här ringde jag "skjutreglaget? animering som vi just definierat, sätt sedan längden till 20 sekunder, iterationerna till oändliga och riktningen att växla (när animationen är klar kommer den att gå bakåt till början).
demo
Med det är vi alla färdiga! Kolla in live demo för att se den i åtgärd. Se till att du använder Safari eller Chrome.
Alternativ utförande: Porthole Effect
Lägg märke till att den här tekniken inte använder flera bilder utan istället bara panorering runt en enda bild. På grund av detta kan du uppnå en riktigt cool effekt genom att helt enkelt använda ett stort foto.
För att se hur det fungerar, tog jag en undervattensbild och ändrade sidan ovan för att ha en slags havsportholk. Koden visas nedan. Observera att den här gången, istället för att animationen startar automatiskt, sker den bara när användaren svänger över bilden.
För styling rundade jag helt enkelt divenas hörn så att den är en cirkel och applicerade en boxskugga inställd för inset för att ge den den snittiga looken.
demo
För att se Porthole Demo, klicka på bilden nedan.
Slutsats
Sammanfattningsvis innehåller Webkit Keyframe Animations massor av möjligheter att göra webbsidor imponerande dynamiska utan ett smuss av JavaScript. Typiskt skulle denna typ av effekt ta en ganska anständig bit av kod, men med CSS är det otroligt enkelt.
Lämna en kommentar nedan och låt oss veta vad du tycker om effekten. Är du glada att CSS expanderar för att inkludera dessa typer av beteenden eller tycker du att detta alltid ska vara jobbet med JavaScript? Låt oss veta!