Wix Studio Tips and Tricks

<div id="snow-container"></div>

<style>

#snow-container {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

overflow: hidden;

z-index: 9999;

}

.snowflake {

position: absolute;

background-color: white;

opacity: 0.8;

border-radius: 50%;

animation: fall linear infinite;

}

@keyframes fall {

0% {

transform: translateY(-10px);

}

100% {

transform: translateY(100vh);

}

}

</style>

<script>

(function () {

const snowContainer = document.getElementById('snow-container');

const snowflakeCount = 100;

const snowflakeSize = { min: 2, max: 5 };

const fallDuration = { min: 5, max: 15 };

for (let i = 0; i < snowflakeCount; i++) {

const snowflake = document.createElement('div');

snowflake.classList.add('snowflake');

const size = Math.random() * (snowflakeSize.max - snowflakeSize.min) + snowflakeSize.min;

snowflake.style.width = `${size}px`;

snowflake.style.height = `${size}px`;

const leftPosition = Math.random() * 100;

snowflake.style.left = `${leftPosition}vw`;

const duration = Math.random() * (fallDuration.max - fallDuration.min) + fallDuration.min;

snowflake.style.animationDuration = `${duration}s`;

// Randomly set animation delay to make snowflakes appear at different stages

const delay = Math.random() * duration;

snowflake.style.animationDelay = `-${delay}s`;

snowContainer.appendChild(snowflake);

}

})();

</script>