The christmas spirit should never die, specially with those tasty promotions on ecommerce websites where the christmas is a good reason to buy cool things really cheaper than usual. In some websites, you will see a cool snow effect when you enter in the specific season of the year.
As a developer, this is usually unnecesary having in count that as mentioned unnecessary expenditure of resources of the web browser, however you are not the one that decides wheter the snow should appear or not on the website but the client and if the client wants such feature, the only thing that you can do is implementing so optimized as possible. Fortunately, thanks to an open source plugin that take cares about the optimization and other effects that every user would want, you will be able to implement it within seconds in your project using the snowstorm script. In this article, we'll share with you this awesome plugin and how to implement it in your website.
1. Download and include Snowstorm.js
Snowstorm is a JavaScript-driven snow effect that can be easily added to web pages. It is free for use, and easy to set up. A single JavaScript file provides the functionality required. No images are used for the snow effect. To include Snowstorm.js in your project, download a copy of the script from the repository and save it into a file. Alternatively, you can use the rawgit cdn to serve the file in production:
<!-- From a local copy -->
<script src="snowstorm-min.js"></script>
<!-- Using a free CDN -->
<script src="https://cdn.rawgit.com/scottschiller/Snowstorm/master/snowstorm-min.js"></script>For more information about this library please visit the official repository at Github here or the official website to see the demo.
2. Initialize Snowstorm
After including the snowstorm script, you only need to initialize it. The script exposes globally the snowStorm variable in the window, an object that offers a lot of methods and customizable properties (to know all of them, read the docs in the official website here):
// 1. Define a color for the snow
snowStorm.snowColor = '#fff';
// 2. To optimize, define the max number of flakes that can
// be shown on screen at once
snowStorm.flakesMaxActive = 96;
// 3. Allow the snow to flicker in and out of the view
snowStorm.useTwinkleEffect = true;
// 4. Start the snowstorm!
snowStorm.start();The start method will show at the top of the page the animated snow effect. Snowstorm can eat up a lot of CPU, even on modern computers, because of the number of elements being moved around the screen at once. The basic example may have notably lower CPU use as it doesn't include the christmas lights, and the page layout is much simpler. Consider raising the animation interval, and lowering the amount of snowflakes (active and max) to help reduce the CPU use.
Happy coding !
