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!
Hi and thanks Thomas! This worked beautifully, how to I change the snowflake shape from the star to a snowflake shape?
Cynenergy
Hi Cynthia
you could change the following value:
nowStorm.snowCharacter
You can change it to hearts for example. Good luck!
Hello, I like the snow falling – but I wish they were bigger white flakes.
I am not a Coder/Programmer. Can you make big fluffy white flakes falling down?
Thanks
Hi Robert
this can not be changed with this approach out of the box.
I am sorry to be the one to ask but I am new to web development just having my first website. Can someone tell me what I need to do to enable this on mobile. I phones are pretty top notch since these last posts and when I go into mobile browser settings and hit “view in desktop mode” I can see the snowflakes it is beyond cool! Id love to enable this for mobile viewers as well.