All We Want for Christmas is Our CSS …
You’ve no doubt been following our 2012 SitePoint Christmas Sale – a winterland-themed design extravaganza (desktop version only). Elements on screen that have unfolded day by day have included ice skaters to a dancing bear to leaping fish to a smoking locomotive — and there’s plenty more to come.
Now we’re adding a “Christmas story mode” to this project, for those of you keen to drill down into the story stream.
Head on over to http://xmas.sitepoint.com/story/css to see the current day’s story minus the normal sales page for that day.
You can also link directly to specific days by adding “#day/” and the day number. For instance, this link will take you straight to day 14:
All About the Design
The concept, layout and illustration are the brainchildren (if that’s a thing … yeah, it is!) of Harley Alexander. As he explained in this post, Michael Sauter built our backend. Ian Coleman made it all the bits work together and Jude Aakjaer managed both the team and the project.
The animation was down to me. I love mucking about with animations, and the Christmas sale has been the perfect place to workshop new ideas. No, it won’t work on non-current browsers. Yes, it’s also true that some scenes may push your CPU a little.
My challenge was:
- To find as many different CSS animation approaches as I could
And I barely had to bend those rules. For instance:
1) The dogsled is positioned with CSS (position:fixed) and uses CSS transitions to move it into place. However, I had to add and subtract a class to make the dogs trot.
If you’re interested in the CSS nitty-gritty of this project, join the conversation in our Christmas CSS Podling group. I’ll be hanging around there, answering questions and getting your feedback on what worked best.
I’ll also be writing up some longer animation how-to posts in the new year on SitePoint … so keep an eye out for those.
In the meantime, check out each new day and let us know what you think.