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>
<div class="spacer"></div>
<div id="post1" 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>
<div id="post2" 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"...

CSS

body {
    height:100%;
    width:60%;
    margin:0 20%;
}
.spacer {
    margin-top:100px;
    clear:both;
}
.featuredContainer {
    width:100%;
    max-width:100%;
    height: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 center;
    background-attachment: fixed;
    background-size:cover;
    width:100%;
    height: 100%;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.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

(function ($) {

    $.fn.featuredPost = function () {
        var $self = this;
        var $eContainer = $self,
            $eTitle = $self.find('.featuredTitle'),
            $eCopy = $self.find('.featuredCopy');
        var init = (function () {
            $eContainer.stellar();
            $eContainer.waypoint(function (direction) {
                $eTitle.stop().animate({
                    'margin-left': '0'
                }, 700, 'easeOutCubic', direction === 'down');
                $eCopy.stop().delay(200).animate({
                    'margin-right': '0'
                }, 700, 'easeOutCubic', direction === 'down');
            }, {
                offset: '60%'
            });
        }());
    };
}(jQuery));


$('#post1').featuredPost();
$('#post2').featuredPost();
$('#post3').featuredPost();