Veneer web font<\/a> which was already being used on the site had a subset of extended symbols including some lovely looking snowflakes.
\nSO each of the flakes you see falling down the screen is actually a \u201cU\u201d or a \u201cT\u201d which renders in the VeneerExtras font as one of two different flake designs.<\/p>\nSnow is falling<\/h2>\n
Each snowflake consists of two animated elements. There is the span with a class of \u201csnowflake\u201d which uses the \u201csnow-vg\u201d keyframe animation to move it from the top of the screen to the bottom over the course of 30 seconds.
\nThen, within each span I create a pseudo element which holds either a T or a U. This pseudo element uses the snow-hz keyframe animation to move left to right and back within its span.<\/p>\n
![\"screenshot\"](\"http:\/\/local.sandjam.co.uk\/wp-content\/uploads\/2014\/11\/screenshot.jpg\")
<\/p>\n
Start the snow<\/h2>\n
I have some javascript which waits for the page to be loaded, then creates the required number of snowflakes with random sizes, colours and positions within the parameters it is given.<\/p>\n
Snow gutters<\/h2>\n
The script which positions the snow does some calculations to work out where the gutters are on the left and right of the main page content and attempts to disperse the snow in to those gutters.<\/p>\n
Deep and crisp and even<\/h2>\n
The JS object which creates the snow has a number of parameters which control the size, speed and density of snow so you can easily tweak the feel of the snowstorm on each page.<\/p>\n
Merry Christmas to all and to all a good night<\/h2>\n
Feel free to modify and reuse this code however you like, but I\u2019d appreciate if you\u2019d credit me in the source if you\u2019re using it on a project.<\/p>\n
View the demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"The brief I was asked to add a festive touch across a range of client sites by adding a falling snow effect in the background of the pages. To do this in a stylish, un-obtrusive and efficient way was the challenge in hand. JS OR CSS3? The first big decision was whether to use javascript […]<\/p>\n","protected":false},"author":3,"featured_media":832,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[78],"tags":[91,14],"class_list":["post-831","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-css3","tag-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/comments?post=831"}],"version-history":[{"count":5,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/831\/revisions"}],"predecessor-version":[{"id":1081,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/831\/revisions\/1081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media\/832"}],"wp:attachment":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media?parent=831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/categories?post=831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/tags?post=831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}