Merry Christmas, everyone; my expertise lies not in web design, though I have had a little experience in the past.

I really enjoy the design of the Winter Bash 2014 page. It is soothing to look at, not complicated to the eye and the colors blend really well.

I also noticed that the snow flakes would interact with your mouse over. This is totally rad.

So my question is, would one need jQuery to accomplish that or CSS would simply suffice to achieve the effect?

Would one at least need Photoshop to create graphics initially and then animate them? Or it is possible to accomplish all that just by using HTML, CSS, jQuery etc (I am just making a guess here)?

Happy holidays.

  • 1
    Kind of off-topic and better suited to StackOverflow.com. The flake effect has been around for 10+ years. It's just javascript. Google for "snowflakes falling web page" and you'll find it. – Scott Dec 26 '14 at 3:09
  • The snow animation used on the Winter Bash home page is actually a rather fancy custom-written one by balpha; see meta.stackexchange.com/questions/213043/… and blog.stackoverflow.com/2014/12/winter-bash-2014. Relevant quote from the 2014 blog post: "Management gave us a clear mandate when it came to building new features into Winter Bash: We were not allowed to spend weeks on snow animation." – Ilmari Karonen Dec 26 '14 at 20:52
  • @IlmariKaronen Why not post that as an answer? – Yisela Dec 31 '14 at 9:59
  • @Yisela: OK, done. – Ilmari Karonen Dec 31 '14 at 19:22

The snowflake animation for Winter Bash was written by balpha in 2012, and is described in this post by him on meta.SE:

I wrote it for last year's Winter Bash, and I actually promised to open source it after some code clean-up, which to my shame I still, one year later, haven't done yet.

I made it my mission that if Stack Exchange recycles the oldest JavaScript animation that exists on the internet, it should at least be a very nice-looking version. The snowflake movement is actually based on an academic paper (and on a second one that's based on this one, but which I'm unable to find right now).

This year when working on Winter Bash, I was specifically ordered "not to spend a ridiculous amount of time on snow animation."

Alas, the code does not appear to have been officially released yet. Of course, if you want, you can still take a peek at the (minified) source code. One detail that's fairly easy to spot is that the large snowflakes are pre-drawn, and loaded from an image sprite (note: the image is white-on-transparent; view against a dark background to see the flakes), whereas the small round flakes are apparently just dynamically drawn circles.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.