Every Christmas, websites change their interface to respond to the festive atmosphere. One of the simplest but most effective highlights is Snowfall Effect.

However, many old snowfall scripts often use heavy jQuery libraries or complex Canvas, causing the website to be slow and laggy on phones. In this article, I will share the passage snowfall code use CSS3 Animation and Vanilla JavaScript (pure JS). Ensure 3 criteria: Super light – No lag – Easy to install.

Advantages of snowfall code for Christmas website

• Performance optimization: Use CSS Keyframes to create movement instead of continuously calculating positions using JS, which reduces CPU load.
• Do not block interactions: Attribute processed pointer-events: nonehelping users still click on links/buttons under the snow without getting stuck.
• Highly customizable: Easily adjust the amount of snow, falling speed and snowflake shape.

Full Code of falling snow effect (HTML/CSS/JS)

Below is the full code. You don’t need to download cumbersome files, just copy and paste.

To change the color of the snow, change the color code in the line color: #F527E4;

Full Code for snowfall effect with snow cave at the footer

This is an enhanced version using HTML5 Canvas. This effect will allow snow to fall and collect at the base of the site. Over time, the layer of snow will thicken and can cover the screen like a real blizzard.

The effect of snow accumulation will be obscure content your website from bottom to top. Please consider carefully before using it for sales pages because customers may not see the “Buy now” button or Footer. You can adjust variables maxSnowHeight in the code to limit the height of the snow (for example, only make it 100px high and then stop).

Explanation of the parameters in the code for you to customize:

• maxSnowHeight = height;: The snow will rise until it fills the screen (full screen). If you just want it to rise a little and then stop (so as not to cover the web), change it to a specific number of pixels, e.g. maxSnowHeight = 150;.
• snowflakeCount = 200;: Number of falling snowflakes. Increasing it makes it thicker, but a weak device can lag.
• snowPile: This is a technical piece to save a “topographic map” of the bottom layer of snow.

Additional instructions for Snowfall Code Website Manual Code (HTML/PHP)

For self-coded websites or other open source code (Laravel, CodeIgniter…), you do the following:

1. Open the file footer of the interface (usually footer.php, footer.html or main layout file).
2. Find the closing tag