I am looking to create a Javascript animation where certain divs move horizontally across the screen, similar to examples on this website and here. The HTML code I have is:
<div id = "creators" class = "big-part">
<h3>Creators</h3>
<div class = "creator_name">
<h4>Name</h4>
<p>Text</p>
</div>
<div class = "creator_name">
<h4>Name</h4>
<p>Text</p>
</div>
<div class = "creator_name">
<h4>Name</h4>
<p>Text</p>
</div>
</div>
My CSS for this section includes styling for the div elements with class "big-part" and "creator_name". Here's how it looks:
.big-part {
color: rgb(230, 230, 230);
background-color: #3c3c91;
border-radius: 21px;
padding: 0.5% 1.5%;
margin-top: 2%;
}
.creator_name {
background-color: rgb(230, 230, 230);
height: 300px;
color: #3c3c91;
border-radius: 15px;
padding: 1%;
}
.creator_name {
width: 25%;
display: inline-block;
margin: 2% 2%;
}
For the Javascript part, I have tried to make these divs move using the following script:
var creatorEl= document.getElementsByClassName("creator_name");
var startTime = new Date().getTime();
var moveTheDiv = function() {
var currTime = new Date().getTime();
var secondsElapsed = ((currTime - startTime)/1000);
var newLeft = parseFloat(secondsElapsed) * 30 + "px";
creatorEl.style.left = newLeft;
window.requestAnimationFrame(moveTheDiv);
};
moveTheDiv();
I would like this animation to occur only when the user scrolls down and the div is visible on the screen. Any guidance on achieving this requirement would be appreciated.
EDIT: I have noticed that I can make the movement happen by adding an ID to each div element and moving them individually with the IDs. Is there a way to make them both move simultaneously using just the class attribute?