JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script src="http://markdalgleish.com/projects/stellar.js/js/stellar.js"></script>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<body>
    <div class="spacer"></div>
    <div class="featuredContainer">
        <div class="featuredContent">
            <div class="featuredTitle">The Title of This</div>
            <div class="featuredCopy">
                <p>Pork belly aesthetic synth direct trade. Fingerstache photo booth asymmetrical Blue Bottle. Kogi cray irony cliche banjo Etsy. Vinyl Blue Bottle PBR&B, ethnic tattooed actually Echo Park ethical messenger bag authentic raw denim craft beer four loko Odd Future Neutra. VHS pickled quinoa freegan street art umami plaid tattooed Blue Bottle. Vice mumblecore shabby chic readymade gentrify Tonx. Pitchfork craft beer vegan, gastropub chia swag artisan ugh PBR&B letterpress McSweeney's narwhal Blue Bottle single-origin coffee</p>
                <p><a href="#">Go here for more information!</a>

                </p>
            </div>
        </div>
        <div class="featuredImage" data-stellar-background-ratio="0"></div>
    </div>
    <div class="spacer"></div>
</body>

CSS

body {
    height:100%;
    width:100%;
    margin:0
}
.spacer {
    margin-top:1000px;
    clear:both;
}
.featuredContainer {
    width:100%;
    max-width:100%;
    overflow:hidden;
    position:relative;
    clear:both;
}
.featuredImage {
    position:absolute;
    top:0;
    left:0;
    background:url(http://upload.wikimedia.org/wikipedia/commons/d/d6/STS120LaunchHiRes-edit1.jpg) bottom;
    background-attachment: fixed;
    background-size:cover;
    width:100%;
    height: 100%;
    opacity:.3;
    z-index:-1
}
.featuredContent {
    z-index:2;
    padding:10%;
    overflow-y:auto;
    overflow-x:hidden;
}
.featuredTitle {
    text-align:right;
    font-size:4em;
    width:48%;
    margin-left:-200%;
    float:left;
}
.featuredCopy {
    text-align:left;
    font-size:1em;
    width:48%;
    margin-right:-200%;
    float:right;
}

JavaScript

$(document).ready(function () {
    $('.featuredTitle').css('opacity', 0);

    var animDefaults = {
        'margin-left': '0',
        opacity: 0.5
    };

    $('.featuredContainer').stellar();
    $('.featuredContainer').waypoint({
        offset: '80%',
        handler: function (direction) {
            $('.featuredTitle').stop().animate(animDefaults, 1000, 'easeOutCubic', function () {
                $(this).animate({
                    opacity: 1
                }, 2000);
            });

            $('.featuredCopy').stop().delay(200).animate({
                'margin-right': '0',
                opacity: 0.5
            }, 1000, 'easeOutCubic', function () {
                $(this).animate({
                    opacity: 1
                }, 2000);
            });
        }

    });
    $('.featuredContainer').waypoint(function (direction) {
        $('.featuredTitle').stop().animate({
            'margin-left': '-200%',
                'opacity': '0'
        }, 0, direction === 'up');
        $('.featuredCopy').stop().animate({
            'margin-right': '-200%',
                'opacity': '0'
        }, 0, direction === 'up');
    }, {
        offset: '100%'
    });

});