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
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.
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
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.
<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.
<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>
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.
See below for an example implementation of the snow effect. Enjoy!