two years agoCSS3 animations demonstrated with snow
This winter we have had an unusually snowy time of things, as a matter of fact so has the whole of the UK. As a Clearleft christmas snowy surprise I wrote a CSS3 snow bookmarklet.
If you are running a WebKit based browser you can make it snow on anywhere on the internet by dragging the following bookmarklet into your toolbar, sending any site into a mini snowstorm!
I based the snow in part on the leaf example on the WebKit blog.
JavaScript is only just to add the snowflakes in their starting position (and naturally in order for it to be a bookmarklet) but all the animation and styles are done in pure CSS. So if you wanted to do this without any JavaScript at all you could just start with the snowflake elements directly in the source and it would work fine.
For the snowflakes themselves I had a lot of fun looking through the Unicode list of snowflakes, and asterisks trying to find the prettiest snowflakes ❆, ❅, ❄, ✳, they are in an array and the sizes are in another array. Every snowflake is an absolutely positioned div with a span inside, we will come to that later. When a snowflake is chosen a size and a character are chosen at random. the distribution of sizes is controlled by the proportion of the size class in the array:
var flakes = ['2746', '2745', '2744', '2733'];
var sizes = ['tiny', 'tiny', 'tiny',
'small', 'small', 'small', 'small',
'medium', 'medium', 'medium', 'medium', 'medium', 'medium',
'large', 'massive'];When the snowflakes are positioned, a random side (left or right) and a percentage between 0 and 60 is chosen to set the position absolute values, this makes it work nicely when you resize the browser and means there is a higher concentration of snowflakes in the center 20% of the screen. They also needed an epic-ly large z-index because this is going to be used as a bookmarklet and you don't know what will be on the page it is used on.
Another consideration in the setup was that white snowflakes would not be seen on white pages so a text shadow was added to make it stand out, I used rgba for this to make it blend in better with any background color.
text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 2px;There are two main animations for each snowflake, fading and dropping. The span inside the snowflake does the spinning. These animations are set up and given a reference-able name in the CSS file:
/* Hides a snowflake towards the very end of the animation */
@-webkit-keyframes fade {
/* Show a snowflake while into or below 85 percent
of the animation and hide it, otherwise */
0% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
@-webkit-keyframes drop {
/* Makes a snowflake fall from -50px to 650px
pixels in the y-axis starting at -50 so as
to appear to be falling from above
the screen not starting at the top */
0% { -webkit-transform: translate(0px, -50px); }
100% { -webkit-transform: translate(0px, 650px); }
}The named animation group contains sub groups, rule blocks where the selector is one moment in the animation. When the animation runs it looks at the timeline of keyframes and smoothes the animation accordingly, for example in the fade animation above, the opacity stays at 1 until 85 percent through its animation (aka one drop) where it then begins a smooth fade to 0 over the last 15% of the time. If we had omitted that middle step and just had opacity set to 1 at 0% and to 0 at 100% then the fade would be a smooth fade over the duration of the whole animation.
You can also set the 'moment' of the keyframe using the keywords from and to, this is effectively the same as 0% and 100%. For simple animations this probably would suffice but I find using percentages gives you a greater degree of control over the pace of your animation.
-webkit-animation-name: 'fade, drop'Because we know we have two animations being applied to each snowflake div in JavaScript we can give the other animation properties two values and know that they apply to the two animations respectively.
-webkit-animation-iteration-count: infinite, 20;The animation-iteration-count states how many times an animation should run. We are not too fussed about the fade but we want to only have each snowflake fall from the sky 20 times before disappearing, just in case the bookmarklet is used and left open in a tab it shouldn't continue indefinitely.
-webkit-animation-direction: normal, normal;Options for this are normal and alternate. Normal behaves exactly as you have specified in your keyframes, alternate behaves normally on odd iterations and reversed on even iterations
-webkit-animation-timing-function: linear, ease-in;There are quite a few options you can play with for this property ease linear ease-in ease-out ease-in-out and if you really know your animation maths you can go wild with cubic-bezier(X, X, X, X). Basically this describes the acceleration of the animation e.g. linear is all at the same speed, ease-in has a little warm up first, ease-out warms down and ease-in-out does both. I wanted the snowflakes to ease gradually in before reaching a constant speed.
-webkit-animation-durationWe are setting the animation-duration in Javascript because it needs to be randomised to avoid all the flakes falling at the same rate. This is being set at a random time between 5 and 11 seconds (trial and error got these magic numbers). Ideally I would have set the range based on the size of the snowflake which would have been cool, I could easily have made the larger ones fall faster than smaller ones, but I didn't think of that at the time.
-webkit-animation-delayHow long until the first snowflake starts falling? I have set this in Javascript to be instant for the first snowflake (remember it still has to fall 'into the screen' when it starts) and then a random amount of time between 4 and 8 seconds for the others. This was important with so few snowflakes because we need to spread them out so they don't all fall at the same time and look like a continuous snow storm
Naturally there is an animation shorthand property should you wish to specify everything at once.
With our snowflakes falling and fading nicely, all that remains is the spinning. in the JavaScript I set a random animation to the span inside the snowflake div that contains the snowflake character. The animation is then either clockwiseSpin or counterclockwiseSpin
@-webkit-keyframes clockwiseSpin {
/* Rotates a snowflake from -50 to 50 degrees in 2D space */
0% { -webkit-transform: rotate(-50deg); }
100% { -webkit-transform: rotate(50deg); }
}
@-webkit-keyframes counterclockwiseSpin {
/* Rotates it from 50 to -50 degrees in 2D space */
0% { -webkit-transform: rotate(50deg); }
100% { -webkit-transform: rotate(-50deg); }
}We then set the properties explained above for the span.
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%;The spinning should be infinite and to add to randomness we need to use the 'alternate' value for direction and ease-in-out as the timing function, the offset transform origin plays with the rotation transform inside the spinning animation in order to make it seam like it is floating on a light snowy breeze.
To finish it off then the JavaScript is wrapped in a self executing function, the CSS is added to the head of the document from the main JavaScript file rather than having to bulk that into the bookmarklet. The JavaScript on is then splurted into the head of the document. The bookmarklet looks like this:
javascript:(function(){var%20s=document.createElement('script');s.src='http://j.mp/7ZZuRu';document.getElementsByTagName('head')[0].appendChild(s);})()All that remains is to just Let it Snow!
Further reading
These two articles on the WebKit blog have some good demo's on the use of animation. My 24ways article goes into a bit more detail on transforms and Tim Van Damme's great 24ways article has a supurb space animation demo which is worth looking at. The spec is available on the w3c site.
Snowstorm is a Javascript-driven snow effect that can be easily added to web pages. It is free for use, and easy to set up. A single Javascript file provides the functionality required. No images are used for the snow effect.
Web Design Company 26th January 2010 04:47
vHXm1C Howdy, and <a href="http://kamagra-fda.viviti.com">generic kamagra</a> and http://kamagra-fda.viviti.com generic kamagra and vwjsu and
mobic online 21st March 2010 16:48
Your post is really informative for me. I liked it very much.
blanc pain watch 10th July 2010 09:44
malin 13th July 2010 03:26
stationary bikes 19th July 2010 07:28
I like your post and all you share with us is up to date and quite informative, i would like to bookmark the page so i can come here again to read you, as you have done a wonderful job.
phoenix carpet cleaning 29th July 2010 16:50
ChannelBlu 30th July 2010 11:29
James Albright 2nd August 2010 22:01
kirk 3rd August 2010 14:49
Great Buddy how you know about this in very details, it is really very interesting and knowledgeable things.
___________
<a href="http://personalwealthacademy.com/internet-coaching.php">internet coaching</a>
hilda_dada 3rd August 2010 19:09
Edward 10th August 2010 12:41
thanks for this site,
Business Marketing Strategy Information And Knowledge | Healthy Living Solution
Information and Business Online 11th August 2010 18:30
Scoden 13th August 2010 07:58
Linda 15th August 2010 03:10
Acuvue Advance Astigmatism 15th August 2010 07:13
Mark M 17th August 2010 07:01
Thank for you for providing this tutorial, it enlighten my idea to solve the problem I encounter! I'll bookmark it and hope could read more article from you.
Good done!
Jiaren 17th August 2010 13:14
John Stantom 20th August 2010 02:10
louis vuitton handbags 22nd August 2010 15:15
Benn 22nd August 2010 17:50
Tracy 22nd August 2010 17:52
John 22nd August 2010 17:52
Mike 22nd August 2010 17:53
goods site:
<a href="http://www.goods-in-china.com"> wholesale nike shoes,nike soccer shoes,louis vuitton handbag,abercrombie fitch shirts,polo t shirts 2010,free shipping</a>
wholesale nike shoes 23rd August 2010 01:44
goods site:
http://www.goods-in-china.com/wholesale-price_Nike+Soccer+Shoes.html nike soccer shoes
nike soccer shoes 23rd August 2010 01:46
good site: www.goods-in-china.com
http://www.goods-in-china.com/wholesale-price_Louis+Vuitton+handbag.html louis vuitton handbag
louis vuitton handbag 23rd August 2010 01:48
Shiney 23rd August 2010 18:08
Drona 23rd August 2010 18:09
Brown 23rd August 2010 18:10
hayden 23rd August 2010 18:10
It is hard find post say such a thing is clear like you.
chanel handbags 24th August 2010 04:24
It is hard find post say such a thing is clear like you.
five finger shoes 24th August 2010 04:25
be accepted. I have noticed that for an application, a close up photo of something interesting seams to be the way to go.
Purely for your continued education (not as fuel to mock me with) here is a list of my rejections.
lace front wigs 24th August 2010 05:31
metin2 yang 25th August 2010 07:28
<a href="http://www.toptoys2trade.com/power-balance-wholesale-2-c-40/ "> power balance</a>
animal rubber bands 25th August 2010 08:54
lili 26th August 2010 08:39
other webmasters as well. If you will like this to shared on other forums as well, I will really like to help. I will post it with your name to make your work really help full for you as well! Keep up the good work, post more topics like this and I know the forum will really be proud of their best resources.
one dollar cookware 27th August 2010 09:59
awesome, thanks for the coding. This will help me get prepare for Christmas theme.
symptoms of kidney infection 28th August 2010 01:39
thanks for the programs above. Hope this would not crash my website. But how was the integration with websites? Can I use it on blogs as well?
completely free dating sites 28th August 2010 01:42
keep up the good work documenting all those hard work and showing it to us. The explanation is brilliant.
make money online 28th August 2010 01:45
louis vuitton 30th August 2010 07:34
This is a great post; it was very informative. I look forward in reading more of your work. Also, I made sure to bookmark your website so I can come back later. I enjoyed every moment of reading it
And I like wearing <a href="http://www.srait.com">nfl jerseys</a>.
wholesale nfl jerseys 31st August 2010 04:33
Excellent! Thank you
discountshoes 31st August 2010 07:01
Norwegisch Deutsch 31st August 2010 23:00
b1@ 1st September 2010 20:59
While bargain are purchasing Li-ion album acclimation the sellers will accustom to them how abounding hours that Album acclimation can come, there are added causes that are accordance to the birthmark of the Li-ion rechargeable battery. Many album buyers acquire no apprehension about abstract getting circuitous on accepting complete Action out of their laptop batteries Album adeptness pack. Like all added Li-ion rechargeable batteries; you allegation to board adversity if those are unused. Don't abode your Album Acclimation haversack nearer to chemicals or in a wet across as this will abridge your Album adeptness haversack Life.
http://laptopbattery.mublogs.org/
dell laptop battery charger 2nd September 2010 10:13
I hope you have a nice day! Very good article, well written and very thought out. I am looking forward to reading more of your posts in the future.
http://www.juicycouture4u.com/
Juicy Couture 3rd September 2010 03:32
Maya King 3rd September 2010 07:50
Londo 3rd September 2010 12:39
louis vuitton mini agenda refill 4th September 2010 08:50
roger 4th September 2010 10:48
rajan 4th September 2010 10:49
ragi 4th September 2010 10:50
ragini 4th September 2010 10:51
nice 5th September 2010 09:18
nice 5th September 2010 09:19
power balance
power balance 7th September 2010 02:29
wholesale china cell phones 7th September 2010 03:27
traduttore italiano giapponese 7th September 2010 21:17
Thanks for sharing!
Ted 8th September 2010 10:44
That’s one small step for man writing CSS, this is really a cool effect and is a good reference for designers.
Adult Dating 8th September 2010 18:38
http://business-idei.narod.ru
business-idei@yandex.ru 8th September 2010 21:21
hello 9th September 2010 09:25
GerryHenries 9th September 2010 19:59
Wooh Ram 9th September 2010 20:09
I hope you never stop! This is one of the best blogs Ive ever read.
Rolex replica 10th September 2010 05:56
christian shoes 10th September 2010 09:13
Nice! Thanks very good for report,I follow your article.
ghd straighteners 10th September 2010 11:01
<a href=http://www.pphog.com/Golf-Polo.html>Golf Polo</a>
<a href=http://www.pphog.com/Match-Polo.html>Match Polo</a>
<a href=http://www.pphog.com/Black-Watch-Polo.html>Speciaux Polo</a>Polo Ralph Lauren Femme Nouveau Polo Femme Golf Polo Match Polo Speciaux
pololacoste 12th September 2010 10:05
thankx post good
mirc 12th September 2010 14:47
thankx goood
Çet 12th September 2010 14:48
http://www.brand-watch-supplier.com/efx-bracelet-c-52/ EFX bracelet
power balance 14th September 2010 03:37
Nice! Thanks very good for report,I follow your article.
cosplay costumes 14th September 2010 09:21
nice 14th September 2010 21:23
<a href=“http://www.ssktoys.com/”>Silly Bandz</a> are not just for teens anymore! The company of the popular bracelets have released a number of UK themed bands. Orders from all over Kentucky and the country are coming in online...from Tennessee, Pennsylvania, to South Carolina. UK basketball fans want their hands on the new Coach Cal Silly Bandz.
Silly Bandz 16th September 2010 06:49
ryan jain 16th September 2010 06:56
sarah genner 16th September 2010 19:43
Dear friends, please temporarily stop your footsteps
To our website Walk around A look at
Maybe you’ll find happiness in your sight shopping heaven and earth
You’ll find our price is more suitable for you.
Welcome to our website http://www.clotheshops.us
Next we come to talk about a topic:
Why are now prices are very expensive%uFF1F
yes Many people now have to earn more money
to Pushing up prices
But they didn’t find customers buy after won’t come back
But friends %uFF0CDo you ever found
Our website is more cost-effective price than others
lingh 17th September 2010 01:27
<a href=" http://www.rolexclassic.com/class/?mywatchclass=443">rolex</a>
replia rolex
replica omega
replica breitling
replica cartier
replica IWC
replica chanel
replica watches
All the watches here have top quality and the price is very reasonable.
You will never ever regret to enter and take a look at.
replica breitling 17th September 2010 03:18
http://www.nicecoachhandbags.com
coach handbags 17th September 2010 07:59
Jake 17th September 2010 20:38
headband wind protection for your
louis vuitton 18th September 2010 15:21
air jordan 19th September 2010 10:51
louboutin shoes 19th September 2010 10:52
air jordan 19th September 2010 10:57
Cheap Nike Shoes 19th September 2010 11:03
accent and you have yourself a costume
lace 20th September 2010 01:03
I hope you have a nice day! Very good article, well written and very thought out. I am looking forward to reading more of your posts in the future.
Juicy Couture 20th September 2010 03:56
peterson 23rd September 2010 09:04
james kerry 23rd September 2010 12:29
I have a good website, you can see that share
http://www.BuyMoncler.net/
moncler 24th September 2010 06:06
Sue 24th September 2010 11:15
I really enjoyed it.
cheap mac makeup 24th September 2010 12:49