JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="coverLeft"></div>
<div class="coverRight"></div>

<div class="wrapper">
    <div class="logo">
        <img src="http://lorempixel.com/200/200/fashion/9/" />
    </div>
    <div class="text">
        <p id="first">The original SheerWeave fabric</p>
        <p id="second">Infused with Microban</p>
        <p id="third">GREENGUARD Certified</p>
        <p id="fourth">Available in 10 colors</p>
    </div>
</div>
<!--Background image here -->
<!--<img src="path" width="some width" height="some height"/>-->
<!-- <div class="centre">
            <div style="float: left;">
-->
<!--Logo Here-->
<!-- <img src="http://placehold.it/350x150" id="myImage"/>
</div>
<div style="float:left;">
    <p id="first">The original SheerWeave fabric</p>
    <p id="second">Infused with Microban</p>
    <p id="third">GREENGUARD Certified</p>
    <p id="fourth">Available in 10 colors</p>
</div>
</div>-->

CSS

.logo {

    /*reveal from right to left*/

    position: absolute;

    left: 50%;

    width: 50%;

    text-align: right;

    opacity: 0.0;

    z-index: 7;

}

.wrapper {

    padding-top: 10px;

    margin: 0 auto;

    width: 100%;

    height: 100%;

}

body {

    overflow: hidden;

}

.text {

    /* reveal right */

    position: absolute;

    left: 0;

    width: 50%;

    /*display:table-cell;
    vertical-align:middle;*/

    opacity: 1.0;

    white-space: nowrap;

    z-index: 4;

    padding-left: 10px;

}

.text p {

    font-family: sans-serif;

    position: relative;

    /*line-height: 20px;*/

}

.coverLeft {

    position: absolute;

    background-color: #fff;

    left: 0;

    height: 100%;

    width: 50%;

    opacity: 1.0;

    z-index: 6;

}

.coverRight {

    position:absolute;

    right: 0;

    width: 50%;

    height: 100%;

    background-color: #fff;

    opacity: 1.0;

    z-index: 8;

}

JavaScript

$(document).ready(function () {

    $('.text>p').each(function (index, item) {
        //console.log(item, this);
        $(this).delay(100 + index * 200).animate({
            'left': '100%'
        },
        600 + index * 100,
            'easeInQuad');
    });
    $('.logo').animate({
        'left': '0',
        'opacity': '1.0'
    }, 800);
    //$('.coverLeft').delay(1600).animate({'opacity': '0.0'}, 1000); // not required because z-index is below image and above text
    $('.coverRight').delay(600).animate({
        'opacity': '0.0'
    }, 1000);


});