JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum ultricies erat, ac tincidunt leo iaculis non. Donec consectetur nisi quis nisl malesuada rhoncus. Etiam tempus tortor eget erat auctor, at pellentesque lacus bibendum. Vivamus ex
  nisl, facilisis a volutpat quis, tempus id arcu. Etiam et consectetur mauris. Quisque tristique porttitor dolor, id dignissim nunc ultrices non. Suspendisse sed tempus magna. Praesent ac pharetra lorem. Integer et felis sed sapien porttitor porttitor.
  Cras suscipit turpis id est iaculis tempus. In hac habitasse platea dictumst.</div>
<br/>
<div>Suspendisse rutrum tincidunt dui, ac consequat dolor congue vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum viverra ex tempus facilisis. Aliquam scelerisque, magna a tempus bibendum, sapien mauris tincidunt augue, sit amet
  aliquam augue massa vitae sapien. Cras nec libero sed justo euismod volutpat a nec tellus. Vivamus porttitor sodales eros quis fringilla. Sed aliquam, leo et bibendum tristique, ipsum dui efficitur erat, in varius lorem risus sed odio. Nam ac tortor
  tempor metus porttitor pretium vitae a purus. Vestibulum nec tristique nulla, ut commodo mauris. Nulla ut nisl sem. Nulla cursus dolor eget ipsum tincidunt aliquet.</div>
<br/>
<div>Phasellus bibendum in nunc at malesuada. Nunc vulputate enim eget turpis ultrices dignissim. Curabitur eu volutpat magna. Suspendisse eleifend sem sit amet ante molestie, non tristique libero elementum. Ut efficitur commodo consequat. Nulla feugiat risus
  purus. Sed ac tellus in elit pharetra eleifend ut sit amet est. Nam blandit sed tortor elementum hendrerit. Nam vulputate lorem sem. Morbi lectus ante, hendrerit in ex sit amet, sagittis eleifend quam. Morbi rutrum erat quis mi finibus, vitae faucibus
  nisi rutrum. Sed arcu mi, molestie nec sagittis et, fringilla in mauris. In rhoncus nec quam at finibus. In ornare urna leo, vel gravida massa porta nec. Nullam vehicula nisl dictum,...

JavaScript

fadingElements(document.getElementsByTagName('div'), window);

function fadingElements(e, p) {
  f()
  p.onscroll = f
  p.onresize = f

  function f() {
    for (i = 0, w = window.innerHeight, l = e.length; i < l; i++)
      a = e[i], h = a.clientHeight,
      a.style.opacity = 1 - 2 * Math.abs(h / 2 + a.getBoundingClientRect().top - w / 2) / (h + w);
      if (a.style.opacity == 0) {
        a.style.display = "none"
      } else {
        a.style.display = "block"
      }

  }
}