JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div id="top">
    <div class="greenblock"></div>
    <div class="darkblock">
        <img src="http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/whatif-gr.png" class="whatif opacity" />        
    </div>
    <div class="darkblock2"></div>
</div>

CSS

/* Green Fade In */
@-webkit-keyframes greenFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes greenFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-o-keyframes greenFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes greenFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* What If */
@-webkit-keyframes whatIfFade {
    0% { opacity: 0; }
    99.99% {opacity:1;}
    100% { opacity: 0; }
}
@-moz-keyframes whatIfFade {
    0% { opacity: 0; }
    99.99% {opacity:1;}
    100% { opacity: 0; }
}
@-o-keyframes whatIfFade {
    0% { opacity: 0; }
    99.99% {opacity:1;}
    100% { opacity: 0; }
}
@keyframes whatIfFade {
    0% { opacity: 0; }
    99.99% {opacity:1;}
    100% { opacity: 0; }
}

body {
    margin:0;
    padding:0;
    height:100%;
}

#top .greenblock{
    width:100%;
    height:100vh;
    
    background-color:#c3d600;
    background-image: url('http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/logo-l.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
    
    -webkit-animation: greenFadeIn 3s ease-in 1;
    -moz-animation: greenFadeIn 3s ease-in 1;
    -o-animation: greenFadeIn 3s ease-in 1;
    animation: greenFadeIn 3s ease-in 1;
}

#top .darkblock{
    width:100%;
    height:150vh;
    
    background-color:#3b414f;
    background-image: url('http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/logo-l-gr.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

#top .darkblock2{
    width:100%;
    height:150vh;
    
    background-color:#3b414f;
    background-image: url('http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/logo-l-whatif-gr.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

.whatif {
    position:relative;
    top: 100%;
    left:...

JavaScript

// Returns true if the specified element has been scrolled into the viewport.
function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.whatif');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});