My goal is to create captivating animations for my multiple background images.
Here's the CSS code I've come up with:
.header {
background-image: url('/img/cloud2.png'), url('/img/cloud3.png'), url('/img/cloud1.png'), url('/img/cloud4.png');
background-position: left bottom, 20% 40%, 40% bottom, right 85%;
background-repeat: no-repeat;
}
I'm currently facing an issue where I want to move the clouds in an infinite loop. To achieve this, I've written some JavaScript code:
$('header').animate({
'background-position-x': '10%, 3%, 5%, 7%'
}, 500, 'linear');
The problem lies in its functionality. Unfortunately, it only works when I include just one background-position-x value. However, this causes all of the clouds to start from the same x value, which is not ideal.