JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

*{
    transition: all ease .75s;
}

body{
    margin: 0;
}

div{
    width: 100%;
    position: relative;
    left: -100em;
    opacity: 0;
}

div:first-child{
    opacity: 1;
    left: 0;
}

div:nth-child(even){
    background: steelblue;
}

div:nth-child(odd){
    background: cyan;
}

JavaScript

var divs = document.querySelectorAll("div");

[].forEach.call(divs, function(div){
    div.style.height = window.innerHeight + "px";    
});

window.addEventListener("scroll", function(e){
    [].forEach.call(divs, function(div){
        if (this.scrollY > (div.offsetTop - document.documentElement.clientHeight)){
            div.style.opacity = 1;
            div.style.left = 0;
        }
        else{
            div.style.opacity = 0;
            div.style.left = "-100em";
        }
    });
}, false);