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
We hope you find this post useful. In case you are stuck and or need help, feel free to drop a comment below or submit your question. Do share it further and add your feedback about the article in the comments section.
