JSFiddle - React, Tailwind, and code Playground

by s_kuma

HTML

<!DOCTYPE html>
<html lang="jp">

  <head>
    <meta charset="UTF-8">
    <style type="text/css">
      .container {
        width: 100%;
        height: 100vh;
        background: #eee;
        display: flex;
      }

      .box {
        width: 40vw;
        height: 50vh;
        opacity: 0;
        font-size: 30px;
        flex-grow: 1;
        margin: 10px;
        text-align: center;
        transform: translateY(50vh);
      }

      #box1 {
        background: #ff0;
        transition: 1s;
      }
      

      #box2 {
        background: #f0f;
        transition: 1.5s;
      }
      
      #box3 {
        background: #0ff;
        transition: 2s;
      }
      
      #box4 {
        background: #a00;
        transition: 2.5s;
      }

      .active {
        opacity: 1;
        transform: translateY(0vh);
      }
    </style>
  </head>

  <body>
    <div class="container" style="background-color:#ccc"></div>
    <div class="container">
      <div class="box" id="box1">box1</div>
      <div class="box" id="box2">box2</div>
      <div class="box" id="box3">box3</div>
      <div class="box" id="box4">box4</div>
    </div>
  </body>
  <script>
  	window.addEventListener("scroll", function() {

    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    var box3 = document.getElementById("box3");
    var box4 = document.getElementById("box4");

    window.onscroll = function() {

      var screenHeight = window.innerHeight;
      var scrollTop = document.documentElement.scrollTop;

      if (screenHeight / 2 < scrollTop) {
        box1.classList.add("active");
        box2.classList.add("active");
        box3.classList.add("active");
        box4.classList.add("active");
      }
    };
  });

  </script>
</html>