JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pop"></div>
<div id="pap"></div>
<div id="pip"></div>
<div id="pup"></div>
<div id="pep"></div>

CSS

body {
	padding-top:1500px;
}
div {
	width:50%;
	height:200px;
	margin:200px auto;
	background:red;
	opacity:0;
	transition:opacity 1s ease;
}

JavaScript

function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}

var IDs = [
		"pop", 
		"pap", 
		"pip", 
		"pup", 
		"pep"
	], 
	elements = [];

for(var i=0, l=IDs.length; i<l; i++){
	elements.push(document.getElementById(IDs[i]));
}

function scrolled(){
	var curScroll = document.documentElement.scrollTop || document.body.scrollTop,
		windowHeight = document.documentElement.clientHeight;
	
	for(var i=0, l=elements.length; i<l; i++){
		if (curScroll >= elements[i].offsetTop - windowHeight + elements[i].offsetHeight/2.5){
			elements[i].style.opacity = "1";
		}
	}
}
addEvent(window, "scroll", scrolled, false);