JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="inner">
        <div class="inner__block1 block-style">
            <h1>Lorem ipsum dolor sit amet consectetur.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo in aliquid dicta quam iure
                voluptatibus distinctio obcaecati cum architecto illo.</p>
        </div>
        <div class="inner__block2 block-style">
            <h1>Lorem ipsum dolor sit amet consectetur.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo in aliquid dicta quam iure
                voluptatibus distinctio obcaecati cum architecto illo.</p>
        </div>
    </div>

CSS

*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}
html{
    height:4000px;
}
.inner{
    margin-top: 1400px;
    height:900px;
    /* border:2px solid royalblue; */
    position: relative;
}
.block-style{
    width: 500px;
    height: 200px;
    background-color: seagreen;
    padding: 20px;
    font:18px Arial;
    color:white;
    letter-spacing: 0.5px;
    position: absolute;
}
h1{
    font-size: 30px;
    margin-bottom: 20px;
}
.inner__block1{
    top:0px;
    left:-500px;
    transition: all .7s ease-in-out 0s;
}
.inner__block2{
    bottom:0px;
    right:-500px;
    transition: all .7s ease-in-out 0s;
}

JavaScript

let init = () => {
  block1 = document.querySelector('.inner__block1');
  block2 = document.querySelector('.inner__block2');
  hw = document.documentElement.clientHeight;
  taker = true;
  document.onscroll = () => {
    action(block1,checkAndDoleft);
    action(block2,checkAndDoRight);
  }
 
}//end of init
let action = (elem,callback) => {
  Bcoords = elem.getBoundingClientRect();
  let top = Bcoords.top;
  let bottom = Bcoords.bottom;
 
  let holderTop;
  let holderBottom;
 
  holderTop = checking(top, holderTop);
  holderBottom = checking(bottom, holderBottom);
 
  callback(holderTop, holderBottom, elem);
 
}
let checking = (elem, MainElem) => {
  if (elem < 0) {
    MainElem = false;
  } else if (elem < hw) {
    MainElem = true;
  } else {
    MainElem = false;
  }
  return MainElem;
}
let checkAndDoleft = (etop, ebottom, elem) => {
 
  if (etop == true && ebottom == true) {
    elem.style.left = 0+'px';
  }
}
let checkAndDoRight = (etop, ebottom, elem) => {
 
  if (etop == true && ebottom == true) {
    elem.style.right = 0+'px';
  }
}
 
window.addEventListener('load', init, false);