I’m trying to create a floating leaf animation using CSS and a parallax effect with JavaScript. My goal is to have multiple leaves float in slightly different paths and timings across the screen.
But right now:
- All the leaves appear at the same time, even though I added
animation-delay. - The float animation moves them in a very small range.
- I also added a mouse-based parallax effect and wonder if that’s interfering with the animation?
Here’s a simplified version of my code:
HTML:
<div class="floating-leaf" id="leaf1"><img src="images/leaf.png" /></div>
<div class="floating-leaf" id="leaf2"><img src="images/leaf.png" /></div>
<div class="floating-leaf" id="leaf3"><img src="images/leaf.png" /></div>
CSS
.floating-leaf {
position: absolute;
width: 24px;
height: 24px;
z-index: 1;
animation: float 12s linear infinite;
opacity: 0.7;
}
@keyframes float {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: 0;
}
10%, 90% { opacity: 0.7; }
100% {
transform: translate(100px, -100px) rotate(360deg);
opacity: 0;
}
}
#leaf1 { top: 80px; left: 10%; animation-delay: 0s; }
#leaf2 { top: 50px; left: 80%; animation-delay: 1s; }
#leaf3 { top: 30px; left: 45%; animation-delay: 2s; }
JavaScript (for parallax):
function initLeafParallax() {
window.addEventListener('mousemove', function(e) {
const leaves = document.querySelectorAll('.floating-leaf');
leaves.forEach((leaf, index) => {
const speed = (index + 1) * 0.03;
const x = (window.innerWidth - e.pageX * speed) / 100;
const y = (window.innerHeight - e.pageY * speed) / 100;
leaf.style.transform = `translate(${x}px, ${y}px)`; // could this be overriding CSS animation?
});
});
}
How can I make the leaves float more realistically and not all show up at the same time?
Any help is appreciated!
