JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<html><head>
        <meta charset="utf-8">
        <link href="/static/build/styles/samples.37902ba3b7fe.css" rel="stylesheet" type="text/css">
        
        <style type="text/css">
            #box {
  background-color: rgba(40, 40, 190, 255);
  border: 4px solid rgb(20, 20, 120);
  transition: background-color 1s, border 1s;
  width: 350px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.vertical {
  color: white;
  font: 32px "Arial";
}

.extra {
  width: 350px;
  height: 350px;
  margin-top: 10px;
  border: 4px solid rgb(20, 20, 120);
  text-align: center;
  padding: 20px;
}
        </style>
        
        <title>Intersection Observer API - A_simple_example - code sample</title>
    </head>
    <body>
        
            <div id="box" style="background-color: rgba(190, 40, 40, 0.376);">
  <div class="vertical">
    Welcome to <strong>The Box!</strong>
  </div>
</div>
        
        
            <script>
                const numSteps = 20.0;

let boxElement;
let prevRatio = 0.0;
let increasingColor = "rgba(40, 40, 190, ratio)";
let decreasingColor = "rgba(190, 40, 40, ratio)";

// Set things up
window.addEventListener("load", (event) => {
  boxElement = document.querySelector("#box");

  createObserver();
}, false); function createObserver() {
  let observer;

  let options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList()
  };

  observer = new IntersectionObserver(handleIntersect, options);
  observer.observe(boxElement);
} function buildThresholdList() {
  let thresholds = [];
  let numSteps = 20;

  for (let i=1.0; i<=numSteps; i++) {
    let ratio = i/numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
} function handleIntersect(entries, observer) {
  entries.forEach((entry) => {
      console.log(entry);
  });
}
            </script>
        
    
</body></html>