Looking to create a snow effect on a website, I currently have 5 snow particles falling and want them to randomize their horizontal position after passing through the bottom of the viewport. The issue is that only the first child element seems to get affected by the animation delay. Any insights on how to control this behavior for all snow particles would be greatly appreciated.
let snow = document.querySelector('.snow');
function setProperty(position) {
snow.style.left = position + "%";
}
function changeAnimationPos() {
let position = Math.random() * 101;
setProperty(position);
}
setInterval(changeAnimationPos, 6000)body {
margin: 0;
background: linear-gradient(snow, skyblue);
background-attachment: fixed;
}
#header {
margin-top: 5px;
text-align: center;
font-family: sans-serif;
font-size: 40px;
color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.8px;
text-shadow: 0px 0px 5px black;
width: 100vw;
height: 5vh;
background-color: snow;
border-bottom: 3px solid black;
z-index: 999;
}
/*-----Snow-----*/
.snowfall {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.snow {
background-color: white;
height: 10px;
width: 10px;
border-radius: 50%;
border: 1px solid black;
animation: fall 4s linear infinite;
position: absolute;
top: -40px;
left: 10%;
z-index: 1;
}
.snow:nth-child(1) {
animation-duration: 6s;
position: absolute;
top: -40px;
left: 20%;
}
.snow:nth-child(2) {
animation-delay: 2s;
animation-duration: 8s;
position: absolute;
top: -40px;
left: 30%;
}
.snow:nth-child(3) {
animation-delay: 8s;
animation-duration: 12s;
position: absolute;
top: -40px;
left: 40%;
}
.snow:nth-child(4) {
animation-delay: 6s;
animation-duration: 7s;
position: absolute;
top: -40px;
left: 50%;
}
@keyframes fall{
0% {
transform: translateY(0);
}
100% {
transform: translateY(110vh);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<link rel="stylesheet" href="stylesheet.css">
<title>Matching Game Project</title>
</head>
<body id="body">
<header id="header">Matching Game</header>
<div class="snowfall">
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
</div>
<script src="snow.js"></script>
</body>
</html>