Smooth Snowflakes Animation

This tutorial explains how to add smooth snowflakes animation on your Gridbox based site using pure CSS...

Tools

Code editor

Estimated time

5 min.

Adding HTML

1. Using plugin Custom HTML, add html code <div id="snow"> to the page.

 

*If you want to display a snow effect on all pages of your site, place the code in your header or footer.

Adding CSS

2. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.

 

#snow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1000;}

Adding JavaScript

3. Copy JavaScript code below, go to Tools ➝ Code Editor ➝ JavaScript and paste it.

 

document.addEventListener('DOMContentLoaded', function(){ var script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'; script.onload = function(){ particlesJS("snow", { "particles": { "number": { "value": 200, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "opacity": { "value": 0.7, "random": false, "anim": { "enable": false } }, "size": { "value": 5, "random": true, "anim": { "enable": false } }, "line_linked": { "enable": false }, "move": { "enable": true, "speed": 5, "direction": "bottom", "random": true, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": true, "rotateX": 300, "rotateY": 1200 } } }, "interactivity": { "events": { "onhover": { "enable": false }, "onclick": { "enable": false }, "resize": false } }, "retina_detect": true }); } document.head.append(script);});

Something is not clear? Ask a question on community forums.