Minns ni dem, de fantastiska webbsidorna i slutet av 90-talet? NĂ€r julen nĂ€rmade sig sĂ„ bytte man ut logotyper mot jultomtar och muspekaren fick en liten följeslagare i form av tomtens slĂ€de. Det Ă€r inte utan att en nostalgisk tĂ„r försöker ta sig ut ur ögonvrĂ„nâŠ
Turligt nog sÄ tog webbdesigners vÀrlden över sitt förnuft tillfÄnga och la av med liknande tilltag efter millenieskiftet, men nu Àr det nog allt dags igen. Allt fler guider har lagts ut pÄ nÀtet som lÀr dig hur du pÄ olika sÀtt kan fÄ det att snöa pÄ din sida, och hÀr kommer mitt bidrag! Med hjÀlp av CSS animations ska vi fÄ fruset vatten att falla stÀmningsfullt i din webblÀsare! Vi kör igÄng direkt, efter ett varningens ord om CSS Keyframe Animations. Webkit-lÀsare har superbt stöd för tekniken, Firefox har stöd men Àr inte riktigt lika bra och IE stöder som vanligt ingenting. Om du inte Àr sugen pÄ att CSS-koda dig till en vit jul, eller om du vill ge en fin upplevelse Àven till de stackare som inte har keyframe-stöd sÄ kan du alltid anvÀnda dig av jQuery Snow, ett plugin till det bÀsta javascript-biblioteket pÄ marknaden. Ladda ner det pÄ http://loktar00.github.com/JQuery-Snowfall/.
Vill du köra pÄ med CSS, om inte annat sÄ för att lÀra dig lite om keyframe animations sÄ lÀs vidare!
Vi börjar med att fixa animationen i CSS. SÄ hÀr ser koden ut:
@-webkit-keyframes snow-effect { 0% { top: 0px; -webkit-transform:rotate(0deg); } 50% { top: 50%; -webkit-transform:rotate(360deg); } 100% { top: 100%; -webkit-transform:rotate(0deg); } } @-moz-keyframes snow-effect { 0% { top: 0px; -moz-transform:rotate(0deg); } 50% { top: 50%; -moz-transform:rotate(360deg); } 100% { top: 100%; -moz-transform:rotate(0deg); } } @-ms-keyframes snow-effect { 0% { top: 0px; -ms-transform:rotate(0deg); } 50% { top: 50%; -ms-transform:rotate(360deg); } 100% { top: 100%; -ms-transform:rotate(0deg); } }
Vi definierar keyframe-effekten, en för webkit, en för firefox och en för IE (för framtida brukâŠ) och döper den till âsnow-effectâ. Den första raden (0%) anger hur animationen börjar, nĂ€r vi kommit 50% igenom den ska flingan ha rört sig halvĂ€gs ner för skĂ€rmen och roterat ett helt varv och nĂ€r animationen Ă€r klar (100%) ska flingan vara i botten av fönstret och ha roterat tillbaka till sin ursprungliga position.
Utöver att se till att animationen ser ut som vi vill sÄ mÄste vi ocksÄ definiera snöflingorna och var de ska ta vÀgen pÄ sidan.
#winterland { position:fixed; top:0; right:0; bottom:0; left:0; overflow:hidden; z-index:0; } .snowflake { font-family: Helvetica, sans-serif; position:absolute; -webkit-animation: snow-effect 3s linear infinite; -moz-animation: snow-effect 3s linear infinite; -ms-animation: snow-effect 3s linear infinite; /* NÄgon gÄng kommer ju IE att komma ifatt resten av vÀrlden⊠*/ }
Inget konstigt hÀr, #winterland Àr ett div som vi lÀgger lÀngst bak i ordningen (z-index: 0) för att se till att vÄrt innehÄll ligger över snöflingorna. Sen ordnar vi en klass för flingorna, och avslutar den med att koppla den till vÄr animation.
-animation: snow-effect 3s linear infinite;
Vi pekar pÄ vilken animation som ska gÀlla (snow-effect), hur lÄng tid animationen ska ta (3 sekunder), vilken typ av animation vi vill ha (linjÀr) och att den ska rulla pÄ sÄ lÀnge sidan Àr öppen (infinte). Vi har nu bara en del avv CSS:en kvar, men den definierar vi i index.php istÀllet, för att underlÀtta vÄrt arbete och kunna köra en PHP-loop. SÄ hÀr ser det ut:
<style type="text/css"> <?php $flakeCount = 48; /* Antal flingor. 48 = 24*2 = dubbelkul pÄ jul! */ for($i = 1; $i <= $flakeCount; $i++) { $animationTime = (rand(10,100) / 10); ?> #sf<?= $i ?> { -webkit-animation-duration:<?= $animationTime; ?>s; -moz-animation-duration:<?= $animationTime; ?>s; -ms-animation-duration:<?= $animationTime; ?>s; font-size:<?php echo (rand(1,20) / 10); ?>em; left: <?php echo (rand(2,98)); ?>%; } <?php } ?> </style>
Först bestÀmmer vi hur mÄnga flingor vi vill ha pÄ sidan ($flakeCount = 48;) och sedan gör vi en loop som skriver ut lika mÄnga unika #sf-id:s. För att göra dem unika ger vi dem dessutom en slumpmÀssig animationstid ($animationTime) mellan 1 och 10. Eftersom rand bara ger heltal sÄ ber vi om ett slumptal mellan 10 och 100 som sedan delas med 10, pÄ sÄ sÀtt kan vi fÄr fram Àven tiondelar av sekunder. Denna animationstid kopplas sedan till varje #sf och ersÀtter dÀrmed de 3 sekunder som vi angav i mainStyle.css tidigare. Vi ger ocksÄ varje #sf en slumpmÀssig storlek (flingans storlek) och position i x-led pÄ skÀrmen. Sen Àr vi helt klara med CSS:en, ÄterstÄr bara att koppla detta till nÄgra objekt!
<div id="winterland"> <?php for($i = 1; $i <= $flakeCount; $i++) { ?> <span class="snowflake" id="sf<?= $i ?>" >*</span> <?php } ?> </div>
VÄrt winterland-div sÀtts pÄ plats och sen kommer ytterligare en PHP-loop, och Ànnu en gÄng loopar vi igenom den $flakeCount gÄnger. Varje snöflinge-span fÄr den klass som vi definierade i mainStyle.css och ett av de id som vi bestÀmde i loopen högre upp i index.php. Varje span fÄr sedan ett innehÄll, en asterisk Àr bra till mycket och Àven till att imitera en snöflinga!
Och nu Àr allt det viktiga i vÄrt snöfall klart! SlÀng pÄ lite mer CSS-style och lite mer text för att göra det fint sen har du det hÀr -> DEMO. All kod utom PHP finns tillgÀnglig i demon, det Àr bara att ladda ner och testa sjÀlv om du inte orkar skriva. Det enda du behöver göra Àr att klippa ut PHP-snuttarna ovan och klistra in dem pÄ rÀtt stÀlle i kÀllkoden.
Som synes sÄ fungerar animationen bÄde i Webkit och Firefox (nya versioner), men den Àr ordentligt mycket snyggare med webkit-motorn. Ett litet minus Àr ocksÄ att animationen krÀver nÄgra sekunder för att bli riktigt bra, i början Àr alla flingorna ihopklumpade i ett band över skÀrmen men allt eftersom deras olika animationstid ger effekt sÄ sprider de ut sig.
Uppdatering, nu kan du ladda ner en zip-fil med hela kÀllkoden genom att klicka hÀr!
