JSFiddle - React, Tailwind, and code Playground

by Aruna Tebel

HTML

<div class="image-wrapper"> <a href="home.html">
    <img src="http://japesfawcett.com/testsh/images/landing_logo2.png" />
  </a>

    <div id="test">
        <p>enter the sunshine state</p>
    </div>
</div>

CSS

@font-face {
    font-family: segoe;
    src: url(fonts/segoesc.ttf);
}
div.image-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.image-wrapper img {
    display: block;
}
#test {
    position: absolute;
    top: 100%;
    width: 100%;
    text-align: center;
}
#test p {
    width: 100%;
    font-family: segoe;
    font-size: 18px;
    text-align: center;
    color: #000;
    margin-top: -40px;
    -webkit-animation: fadein 8s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 8s;
    /* Firefox < 16 */
    -ms-animation: fadein 8s;
    /* Internet Explorer */
    -o-animation: fadein 8s;
    /* Opera < 12.1 */
    animation: fadein 8s;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Firefox < 16 */
 @-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Safari, Chrome and Opera > 12.1 */
 @-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Internet Explorer */
 @-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Opera < 12.1 */
 @-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

JavaScript

var slogan = "enter the sunshine state";
for (var i = 0; i < slogan.length; i++) {
    (function (i) {
        setTimeout(function () {
            $('#test > p').text(slogan.substring(0, i + 1));
        }, 100 * i);
    }(i));
}