JSFiddle - React, Tailwind, and code Playground

1.flicker 2.slide right to reveal some text 3.delay 4.slide left (Hiding the text) and revealing the website which slides with the rectangle 5.flicker 6.fade out

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<body>
    <div id='loader'>
        <div id='overlay'></div>
        <div id='text'>Text content goes in here</div>
    </div>
    <div id='main'>
        <div id='slide'></div>
        <div id='content'>Main Website Here</div>
    </div>
</body>

CSS

body {
    padding:10px;
}
#loader {
    display:block;
}
#overlay {
    position: absolute;
    top: 0;
    height:270px;
    left: 0;
    right: 0;
    border-left: 50px solid #000;
    background-color: #FFF;
    float:left;
    z-index:0;
}
#text {
    font-size:24px;
    font-weight:bold;
    text-transform:uppercase;
    font-family:helvetica;
    float:left;
    display:none;
}
#main {
    background:#fff;
    height:350px;
    top:0;
    float:left;
    position:absolute;
    left:100%;
    width:100%;
    padding-left:5px;
    color:#333;
    z-index:1;
    display:none;
}
#slide {
    width:400px;
    height:270px;
    background-color:#111;
}
#content {
    padding-top:10px;
}
}

JavaScript

$(window).load(function () {
    $rec = $('#overlay');
    $rec.animate({
        opacity: 0
    }, {
        duration: 50
    })
        .animate({
        opacity: 1
    }, {
        duration: 50
    })
        .animate({
        opacity: 0
    }, {
        duration: 50
    })
        .animate({
        opacity: 1
    }, {
        duration: 50
    })
        .animate({
        opacity: 0
    }, {
        duration: 100
    })
        .animate({
        opacity: 1,
        duration: 50
    }, function () {
        //animation complete       
        $('#text').show();
        $('#overlay').delay(500).animate({
            left: $(this).width()
        }, 1200, 'easeInOutExpo', function () {
            $('#overlay').delay(1000).animate({
                //go back to the beginning
                left: 0
            }, 1200, 'easeInOutExpo', function () {
                //rehide the text
                $('#text').hide();
                //fade once rectangle goes back to beginning
                $(this).delay(700).animate({
                    opacity: 0
                }, {
                    duration: 500
                }, function () {
                    //fade out after flicker
                });
            });
            $('#main').show(10).delay(1000).animate({
                left: 50
            }, 1200, 'easeInOutExpo');
        });
    }); //ends the overlay going back to the left           
});