const boxes = document.querySelectorAll(".decSquare5")
window.addEventListener("scroll", () => {
const innerHeightOfWindow = window.innerHeight;
boxes.forEach(box => {
const boxTop = box.getBoundingClientRect().top
if (boxTop < innerHeightOfWindow) {
box.classList.add("show")
} else {
box.classList.remove("show")
}
})
})
.decSquare5 {
height: 250px;
width: 4%;
border: none;
background-color: #9b9b9b;
opacity: 0.3;
position: relative;
z-index: 2;
top: 300px;
left: 1%;
margin-top: -250px;
transform: translateX(400%);
transition: 0.5s;
}
.decSquare5.show {
transform: translateX(0);
}
I watched a tutorial on how to do a scrolling animation and that guy had a lot of divs with the class=box
, now i just want this for 1 div(decSquare5) but it doesnt work.I think the class is not getting the .show
class but i dont know how to fix it.