Högsäsongen är högst och för några lyckliga människor i väderbestämda klimat är vintern i full gång. Jag bor i Phoenix så riktigt vinter, och därmed snö, är egentligen bara en avlägsen dröm. Således är jag tvungen att vända mig till nerdery för att få min fix!
Idag ska vi gå över en super enkel CSS-teknik som du kan använda för att göra det snö på din hemsida. Det tar bara några minuter på dig och det fungerar som en bra introduktion till att använda flera bakgrundsbilder och keyframe-animeringar i CSS.
Webkit FTW
För att hålla sakerna enkla, startar jag all denna kod med hjälp av -webkit leverantörs prefix. Detta kommer att hålla vår kod renare och lättare att läsa när vi lär oss. Anledningen till att jag valde Webkit är enkel: CSS keyframe animation stödjer stenar. Även Firefox, som nyligen lagt till keyframe-support, kommer verkligen inte att klippa det nästan lika väl som Safari.
Efteråt diskuterar vi hur du slänger i de andra leverantörs prefixen och vilken typ av erfarenhet du kan förvänta dig på varje webbläsare. I slutändan, om du verkligen letar efter en solidt stödd effekt som fungerar på så många webbläsare som möjligt, rekommenderar jag att du letar efter en jQuery snö plugin. Men om du är ute efter en rolig CSS-lärande, fortsätt läsa!
Komma igång: Vi tre PNGs
Inställningen för detta projekt är tre snöiga bakgrundsbilder. Du kan definitivt lägga till mer om du vill, men vi använder tre här för att hålla sakerna snygga och enkla. I grund och botten är allt du behöver, tre transparenta bakgrunds-PNG-filer av varierande storlek med slumpmässiga små vita prickar på dem.
Här är min process för att ställa in dessa. Först skapade jag en bild på 500 px och använde en liten borste med full hårdhet. Du kan ställa in en scatterborste om du vill, men jag gillar kontrollen att du manuellt placerar prickarna runt duken. Sedan, för att se till att det flisade fint, gick jag till Filter> Other> Offset.
Sedan jag började med en fyrkantig bild på 500px kommer jag att klippa det i halv och kompenseras med 250px både horisontellt och vertikalt.
När du har kört det här kommandot kan du ha några röriga fläckar nära centrum, dessa ska vara lätta att rengöra med lite radering. Den viktiga delen är att kanterna sitter fint så mitten av bilden kan ändras om du vill.
Spara nu din PNG och upprepa hela processen för en fyrkantig bild på 400px och en fyrkantig bild på 300px. För de sista två gjorde jag snöflingorna lite suddig och minskade opaciteten lite.
Applicera bakgrunden
Nu ska vi tillämpa dessa bilder på vår bakgrund i CSS. Jag kastar dem på med hjälp av kroppsväljaren, men gärna tillämpa dem på något mer specifikt.
Genomföra flera bakgrunder är precis som att bara tillämpa en bakgrund, den enda skillnaden är att du slänger i ett kommatecken efter den första bildadressen och lägger till i en annan. Här är vad vår kod kommer att se ut, notera att bakgrundsbilderna alla kommer att upprepas som standard.
Flera bakgrunder har bra stöd över hela linjen, det enda som du behöver oroa är att du gissade det, äldre versioner av IE. Som med nästan allt annat i avancerad CSS, stöds flera bakgrunder i IE9, men inget äldre än det. Förhoppningsvis kommer det nya IE-uppdateringsprogrammet att stoppa dessa typer av woes!
Ställa in nyckelramarna
Tidigare har vi gjort några anständigt komplexa keyframe-animeringar på Design Shack, men den här gången kan vi hålla oss väldigt enkelt.
Trots det faktum att jag hänvisar till detta som "enkelt"? Det är visserligen mycket på gång i den här syntaxen så låt oss bryta ner det stycke för bit. Vad det här gör är att skapa en animation som vi då kan ringa till handling på andra ställen i vår CSS. Bassyntaxen är? @Keyframes? men här implementerar vi webkitversionen så att vi använde? @ - webkit-keyframes ?. Snön? En del är det namn jag valde för animationen. Du har lite frihet här, men försök att välja något beskrivande och användbart.
Därefter initierar vi två ramar. Det första är vad vår sida kommer att se ut i början av vår animation, den andra är hur den kommer att se ut i slutet. I början har jag lagt alla våra bakgrundsbilder längst upp till vänster på sidan med? 0px 0px.? Sedan i slutet har jag flyttat varje bild till en ny plats. Precis som när vi lägger varje bild separerar vi varje uppsättning positionsvärden med ett kommatecken.
Position Logic
Placeringen av varje bild i slutet av animationen kan verka godtycklig, men i verkligheten är detta mycket avsiktligt. För att animationen ska fungera rätt måste du förstå några saker.
? När en enda instans av en animation har kört sin kurs kommer den att börja om. Om du inte placerar dina bilder korrekt ser du en blip vid denna punkt.?Anledningen till att vi använder keyframe-animationer i stället för den enklare och mycket bättre stödda övergångsegenskapen är att vi kan slänga en nyckelram animation oändligt så det kommer att fortsätta att snöa i obestämd tid. Med detta i åtanke måste du komma ihåg att när en enda instans av en animation har kört sin kurs, kommer den att börja om. Om du inte placerar dina bilder korrekt ser du en blip vid den här tiden.
Tricket är att använda storleken på dina bilder så att ändramen matchar startramen, vilket ger en sömlös övergång.Till exempel min andra bakgrundsbild var 400px vid 400px, så jag flyttade bakgrunden 400px ner under animeringens gång, detsamma för min tredje bild på 300px. För min första bild gjorde jag något lite annorlunda. Jag ville att den skulle flytta snabbare så jag fördubblade höjden och flyttade den 1000 pixlar. Eftersom detta är en multipel av höjden, matchar den sista ramen fortfarande den första.
Observera också att jag också flyttat horisontellt läge på bilderna. Detta lägger lite vind i ekvationen så snön faller inte perfekt vertikalt. Om du vill att snön ska svänga fram och tillbaka när den faller, lägg bara till några fler bilder.
Genomföra animationen
Vårt sista steg är att återvända till kroppsväljaren och kasta in? -Webkit-animation? för att skapa en instans av animationen. Först anger vi namnet på animationen som vi vill använda, i det här fallet? Snö? då anger vi animationens varaktighet (20 sekunder), nästa väljer vi en tidsfunktion (linjär) och slutligen slog vi animationen oändligt.
Med det ska din webbplats snöa som galen i Safari! Låt oss ta en titt på att expandera detta lite.
Andra webbläsarprefix
Nu lägger du till fler webbläsarsupport. Vårt keyframe setup avsnitt ska utökas till följande. Jag har börjat med bassyntaxen utan ett webbläsarprefix och använde sedan prefixen för Mozilla, Webkit och Microsoft.
Då gör vi samma för stilar i kroppen. Alla de olika webbläsarna använder samma syntax, endast prefixet ändras.
Observera att IE-stödet här är rent för framtiden. Endast IE 10 har stöd för keyframe animationer och det är fortfarande under utveckling.
?Inte så snabbt? säger Firefox
Vid denna tidpunkt ville jag bli allt med handledningen, men tyvärr öppnade jag Firefox och hittade ett problem: ingen animering! Efter lite grävning visade det sig att problemet ligger i flera implementeringar av bakgrunden.
Frågan är en konstig. Firefox stöder flera bakgrundsbilder och den stöder keyframe-animationer. Den stöder även animeringar som använder flera bakgrundsbilder! Av någon anledning verkar det dock inte vara att stödja att flytta varje bakgrundsbilds position självständigt under en keyframe-animation.
Uppdatering
Bra nyheter, kommentera Patric löste vårt lilla Firefox-problem! Det visar sig att min kärlek till shorthand fick mig till trubbel här. Firefox fungerar perfekt om du listar ut alla värden i den inledande raden. Här är den uppdaterade keyframe-koden:
Se den i aktion
demo: Klicka här för att starta
Slutsats
Sammanfattningsvis är det en snap att göra en ren CSS-snöig snöanimering som fungerar i moderna webbläsare. Några minuter med Photoshop och ett par enkla linjer med kod och du har Nordpolen. IE stöder inte keyframe-animationer tills version 10, Opera har för närvarande inget stöd och Firefox har stöd, men det är inte lika omfattande som vad du hittar i Webkit.
Detta projekt illustrerar perfekt varför det är viktigt att leka med dessa saker innan den är redo att genomföras i den verkliga världen. Jag hade ingen aning om att Firefox skulle kasta en skiftnyckel i min lilla animation tills jag faktiskt fick mina händer smutsiga med ett experiment. Nu befinner jag mig mycket mer utbildad om den nödvändiga syntaxen för CSS-animationer i en webbläsare till webbläsare.