JSFiddle - React, Tailwind, and code Playground

by neoswf

HTML

<div id="Infogarfic">
    <div id="loader">
        <img src="images/load_curriculos.gif" width="300" height="300" />
    </div>
    <div id="mask"></div>
    <img id="InfogarficImg" src="images/Infografico6milhoes.jpg" />
</div>

JavaScript

//on infografic load
$('#InfogarficImg').load(function () {
    //hide loader
    $('#loader').fadeOut();
    $('#InfogarficImg').show();
    //scroll body down
    $('html,body').animate({ scrollTop: "5040px" }, 10, function () {
        // on scroll complete, Start animating the page
        $('#mask').animate({ opacity: 0 }, 2500, function () {
            $('html,body').delay(1500).animate({scrollTop : 0}, 11000, function(){
                $('html,body').stop().animate({scrollTop : 0});
            });
        })
    });
})