<div class="box"><h2 class="text">HTML</h2></div>
    <div class="box"><h2 class="text">CSS</h2></div>
    <div class="box"><h2 class="text">Javascript</h2></div>
    <div class="box"><h2 class="text">Scroll event</h2></div>
    <div class="box"><h2 class="text">window inner height</h2></div>
    <div class="box"><h2 class="text">box getBoundingClientRect top</h2></div>
    <div class="box"><h2 class="text">Foobar</h2></div>
    <div class="box"><h2 class="text">Foobar</h2></div>
    <div class="box"><h2 class="text">Foobar</h2></div>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    background-color: coral;
}


.box {
    width: 400px;
    height: 200px;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    margin: 10px;
    background-color: darkseagreen;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateX(200vw);
    transition: transform ease 0.5s;
    
}

.text {
    color: white;
    font-size: 3rem;
    font-weight: bold;
    word-break: break-all;
    text-align: center;
}

.box:nth-of-type(even) {
    transform: translateX(-200vw);
}

.box.show {
    transform: translateX(0);
}
const boxes = document.querySelectorAll(".box");

function checkBoxes() {
  const triggerBottom = (window.innerHeight / 5) * 4;

  boxes.forEach((box) => {
    const boxTop = box.getBoundingClientRect().top;

    if (boxTop < triggerBottom) {
      box.classList.add("show");
    } else {
      box.classList.remove("show");
    }
  });
}

window.addEventListener("scroll", checkBoxes);
checkBoxes();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.