JSFiddle - React, Tailwind, and code Playground

by Andy Mardell

HTML

<div class="col-md-12 ">
    <div class="box">
        <img src="img/world.png" class="icon"/>
        <h1>WEB<br/>DESIGN</h1>
    </div>
</div>

CSS

.col-md-12 {
    height: 1500px;
    padding-top: 1000px;
}

JavaScript

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function(){
    
    if (isScrolledIntoView('.box')) {
        $('img').addClass('animated flip').css('background', 'red');
        //added background red so you can see it has triggered
    }
    
});