JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="a JS-fade-in"></div>
<div class="b JS-fade-in"></div>
<div class="c JS-fade-in"></div>
<div class="d JS-fade-in"></div>

SCSS

html, body{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
%box{
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .3s;
    &.in-viewport{
        opacity: 1;
    }
}
.a{
    @extend %box;
    background: #D9CEB2;
}
.b{
    @extend %box;
    background: #D5DED9;
}
.c{
    @extend %box;
    background: #948C75;
}
.d{
    @extend %box;
    background: #99B2B7;
}

JavaScript

function fadeInElements(){
    var viewOffset = 200;
    var elements = [];
    $(".JS-fade-in").each(function(){
        var element = $(this);
        var position = element.offset().top;
        elements.push({ele: element, pos: position});
    });
    scrollAction($(window).scrollTop());
    $(window).on("scroll", function(){
        var scroll = $(window).scrollTop();
        scrollAction(scroll);
    });
    function scrollAction(scroll){
        for(var i = 0; i < elements.length; i++){
            var element = elements[i];
            if(scroll > (element.pos-viewOffset)){
                element.ele.addClass("in-viewport");
            }
        }
    }
}

fadeInElements();