It’s Christmas time: let’s make it snow!

It’s this time of the year again: Christmas and New Year. Maybe you’ve seen on some sites that the website owner/designer has added a nice snow effect on their webpages. The snow overlay gives a nice, cosy feeling to the visitor. And you may have thought: how did they do this?

Adding a snow effect

Adding a snow effect to your website is not that difficult at all. You do not to have a lot of HTML knowledge to implement it or there is also no need to heavily edit any existing part of your website. By using a JavaScript file, we can easily add the falling snow overlay to our site. The use of images or Flash is not a necessity; which is for good reasons, such as performance or security.

The method explained here will work flawlessly on mobile devices as well. Or, if you wish to do so, you can disable the snow effect on mobile (e.g. smartphones such as Android and iPhone, or tablets such as Android tablets and iPad). More on this option later.

1. The Basic Implementation

I already said it was easy and once you see the code snippet below, you’ll believe me.

<script src="//cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>

Add the above code snippet to the webpage(s) you want the falling snow to appear. In this example, I used CDNJS, a CDN from CloudFlare. It has many advantageous (e.g. faster page load times, HTTP/2 support, HTTPS available).

That’s it! Reload your page and you’ll see the snow fall down.

2. Customise the Snow Effect

The JavaScript-driven snow effect allows to easily customise the properties of the effect. See below for some practical examples on how you can adapt it to your likings.

2.1 Enable or Disable Snow on Mobile

The snow effect works flawlessly on all mobile devices and is disabled by default. However, the effect may require quite a lot of CPU power to render. On mobile devices, with their limited amount of recoures, this may be disadvantageous for your visitor’s experience. As such, it’s a good idea to disable the snow effect on mobile devices altogether. If you still really want to include it, this is still possible.

Right under the code snippet (as shown earlier), you want to include the following properties:

<script>snowStorm.excludeMobile = false;</script>

2.2 Editing the Snow Storm Effects

By default, the snow that is falling down may be hard to see on a webpage with a white background. Since most webpages have  a white background; this means that customising the snow storm’s visuals may be required in your case.

Again, just like with snowstorm on mobile, you want to include the following code snippet after the JavaScript file. The reason behind this, is because the JavaScript file has to be first loaded before the properties will be taken recognised and taken into account by the browser.

<script>
snowStorm.snowColor = '#6699cc'; //give the snowflakes another colour
snowStorm.flakesMaxActive = 96; //the maximum number of active snow flakes on the screen, lowering this may increase performance
snowStorm.followMouse = true; //the snow will fall in a certain direction based on the position of your mouse
snowStorm.snowCharacter = '★'; //change the flake to a specific character
snowStorm.snowStick = true; //if true, the snow will stick to the bottom of the screen
</script>

2.3 Performance Tips & Tricks

Personally, and this may be true for a lot of people, performance of a webpage is important. A slow page is easily closed by your visitors and that’s not something you want.

So here are some performance tips and tricks for the JavaScript snow on your website.

<script>
snowStorm.animationInterval = 30; //milliseconds per frame, the higher the less CPU load
snowStorm.flakesMaxActive = 30; //maximum number of active snow flakes, the lower the less CPU/GPU is needed to draw them
snowStorm.freezeOnBlur = true; //recommended: stops the snow effect when the user switches to another tab or window
snowStorm.usePositionFixed = true; //if the user scrolls, the snow is not affected by the window scroll. Disable to prevent extra CPU load
</script>

Furthermore, feel free to asynchronously load this JavaScript file and to add it to the bottom of your page instead of the <head>.

3. Add Snowflakes Effect to WordPress Website

The above code snippet can easily be used again on a WordPress website. The difference with a WordPress website or blog is that you need to include it into the header.php or footer.php within your theme.

So open your theme’s folder location (this is likely to be found here: /wp-content/themes/yourtheme). Open header.php or footer.php and insert the code snippet as seen at the Basic Implementation.

Demo

See below for an example implementation of the snow effect. Enjoy!