This script will add a snow effect to a page.
Go Back
<style>
#snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 9999;
}
.snowflake {
position: absolute;
top: -10px;
color: #fff;
font-size: 1em;
opacity: 0.8;
pointer-events: none;
animation: fall linear infinite;
}
@keyframes fall {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0.3;
}
}
</style>
<div id="snow-container"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const snowContainer = document.getElementById('snow-container');
const snowflakesCount = 100;
for (let i = 0; i < snowflakesCount; i++) {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.innerHTML = '❄';
snowflake.style.left = Math.random() * 100 + 'vw';
snowflake.style.fontSize = Math.random() * 20 + 10 + 'px';
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
snowflake.style.animationDelay = Math.random() * 5 + 's';
snowContainer.appendChild(snowflake);
// Remove snowflakes once the animation ends
snowflake.addEventListener('animationend', () => {
snowflake.remove();
});
}
});
</script>