<div id="root">
  <div id="target"></div>
</div>

<div id="output">intersectionRatio: <pre></pre></div>

html {
  box-sizing: border-box;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html,
body {
  background-color: #1d1e22;
  margin: 0;
  padding: 0;
}

#root {
  align-items: center;
  background-color: #FFF;
  border: 3px solid rebeccapurple;
  display: flex;
  height: 400px;
  justify-content: center;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  width: 400px;
}

#target {
  animation: sidetoside 5s linear infinite alternate;
  background-color: rebeccapurple;
  background-image: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 14%,#663399 15%,#663399 34%,#ffffff 35%,#ffffff 50%,#663399 51%,#663399 99%);
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  pointer-events: none;
  transition: 0.5s;
  width: 300px;
}
@keyframes sidetoside {
  0% {
    transform: translate3d(-400px, 0, 0);
    left: 0;
  }
  100% {
    transform: translate3d(400px, 0, 0);
  }
}

#output {
  color: #FFF;
  margin: 20px auto;
  width: 400px;
}
#output pre {
  display: inline;
  font-size: 16px;
  padding: 0 10px;
}

const root = document.querySelector('#root');
const target = document.querySelector('#target');
const output = document.querySelector('#output pre');
const io_options = {
  root: root,
  rootMargin: '0px',
  threshold: [...Array(100).keys()].map(x => x / 100)
};
let io_observer;

function io_callback (entries) {
  output.innerText = entries[0].intersectionRatio;
}

io_observer = new IntersectionObserver(io_callback, io_options);
io_observer.observe(target);