Есть следующий код:
function startAnimation() {
var box = document.querySelector('.box');
var boxPosition = box.getBoundingClientRect().top;
var screenPosition = window.innerHeight / 1.2;
if(boxPosition < screenPosition) {
box.classList.add('animation');
}
}
window.addEventListener('scroll', startAnimation);
@keyframes rotate {
100% {
transform: rotate(180deg);
}
}
.box.animation {
animation: rotate 1s ease-in 0.1s;
animation-fill-mode: forwards;
}
.container {
background-color: #03A9F4;
height: 2000px;
}
.box-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 490px;
border: 5px solid #FFEB3B;
}
.box {
width: 100px;
height: 100px;
background-color: #8BC34A;
border: 5px solid #4CAF50;
}
<div class="container">
<div class="box-wrapper">
</div>
<div class="box-wrapper">
<div class="box"></div>
</div>
<div class="box-wrapper">
<div class="box"></div>
</div>
<div class="box-wrapper">
<div class="box"></div>
</div>
</div>
Подскажите пожалуйста, как сделать так, что бы каждый .box поворачивался когда он появляется на экране? Я понимаю, что все .box нужно положить в массив, но что делать дальше с массивом я не представляю...