JSFiddle - React, Tailwind, and code Playground

by reggi

HTML

<script src="https://rawgithub.com/srobbin/jquery-backstretch/master/jquery.backstretch.min.js"></script>
<div class="containment-field">
    <div class="background">
        <div class="darken"></div>
         <h1>The Holstee Manifesto</h1>

    </div>
    <img class="manifesto" src="http://yearofaction.com/wp-content/uploads/2013/01/The_Holstee_Manifesto_8.5x11-791x1024.jpg">
</div>

CSS

h1 {
    -webkit-font-smoothing: antialiased;
    font-family:helvetica;
    text-align:center;
    color:#fff;
    background:none;
    position:relative;
    z-index:2;
    padding-top:20px;
    margin-top:0px;
    -webkit-animation: textme 2.5s;
    /* Safari and Chrome */
    -moz-animation: textme 2.5s;
    /* Firefox */
    -ms-animation: textme 2.5s;
    /* Internet Explorer */
    -o-animation: textme 2.5s;
    /* Opera */
    animation: textme 2.5s;
}
.darken {
    z-index:1;
    background:#000;
    opacity:0.5;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0
}
.containment-field {
    height:200px;
    overflow:hidden;
    position:relative;
}
.background {
    width:100%;
    height:200px;
}
.manifesto {
    top:70px;
    width:200px;
    margin:auto;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    -webkit-animation: fadein 1s;
    /* Safari and Chrome */
    -moz-animation: fadein 1s;
    /* Firefox */
    -ms-animation: fadein 1s;
    /* Internet Explorer */
    -o-animation: fadein 1s;
    /* Opera */
    animation: fadein 1s;
}
/* Safari and Chrome */
 @-webkit-keyframes fadein {
    from {
        top: 200px;
    }
    to {
        top: 70px;
    }
}
/* Safari and Chrome */
 @-webkit-keyframes textme {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

JavaScript

$(".background").backstretch("http://cdn.shopify.com/s/files/1/0031/5352/t/26/assets/background-ambassador.jpg?18374");