Falling Snowflakes Animation – Overview
Falling snowflakes animation is an article that helps you to build a cool snowflakes animation for your website. This article is a part of quick tips and tricks and hence does not contain the code explanation.
We provide you all the necessary code that you can use to build the animation.
There are three parts to the code. The first part contains the HTML section to help you get your page in place. The second part is the CSS code, which performs some basic styling. The third part is the JavaScript that is doing the magic of getting the snowflakes animation in action.
HTML Code
<body> <!-- particles.js container --> <div id="particles-js"> <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <h1>Happy Holidays</h1> </div> </body>
CSS Code
h1{
text-align: center;
color: #fff;
font-size: 4em;
}
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
JavaScript Code
particlesJS("particles-js", {
particles: {
number: { value: 400, density: { enable: true, value_area: 800 } },
color: { value: "#fff" },
shape: {
type: "circle",
stroke: { width: 0, color: "#000000" },
polygon: { nb_sides: 5 },
image: { src: "img/github.svg", width: 100, height: 100 }
},
opacity: {
value: 0.5,
random: true,
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
},
size: {
value: 10,
random: true,
anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
},
line_linked: {
enable: false,
distance: 500,
color: "#ffffff",
opacity: 0.4,
width: 2
},
move: {
enable: true,
speed: 6,
direction: "bottom",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 }
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: "bubble" },
onclick: { enable: true, mode: "repulse" },
resize: true
},
modes: {
grab: { distance: 400, line_linked: { opacity: 0.5 } },
bubble: { distance: 400, size: 4, duration: 0.3, opacity: 1, speed: 3 },
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 }
}
},
retina_detect: true
});
update = function() {
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
Snowflakes Animation Output
Snowflakes Animation – Conclusion
