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="row">
    <div class="span12 padMed bTop">
        <div id="featuredArticle" class="featuredArticleContainer modern">
            <div class="featuredContent">
                <div class="featuredLeft featuredTitle orange">Think OSHA has increased citations?
                    <div class="featuredTransBg"></div>
                </div>
                <div class="featuredRight featuredCopy">
                    <div class="copyBox">
                         <h1 class="mtopZero">You’re right!</h1>

                        <p>While reported fatalities, injuries, and illnesses are trending downward, issuance of OSHA citations have increased 64% in just one year.</p>
                        <p> <a href="http://www.graphicproducts.com/articles/osha-safety-less-violations.php">Find out why and whether this trend will continue.</a>
                        </p>
                        <div class="featuredTransBg"></div>
                    </div>
                    <div class="copyBox"> <a href="http://www.graphicproducts.com/free-gifts/free-top-ten-osha-violations.php"><img src="//www.gpcontent.com/global-includes/images/guides/osha1011.png" alt="OSHA Safety Violation" title="OSHA Safety Violation" name="OSHA Safety Violation">
          <h3 class="mtopZero">Get your copy of the Top 10 OSHA Cited Violations guide and learn how to avoid costly fines at your workplace.</h3></a>

                        <div class="featuredTransBg"></div>
                    </div>
                </div>
                <div class="featuredImage" data-stellar-ratio="0" data-stellar-offset-parent="true"></div>
            </div>
        </div>
    </div>
</div>

CSS

.featuredArticleContainer {
    margin-top:500px;
    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=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: .8;
    z-index: -2;
}
.featuredContent {
    z-index: 2;
    overflow-y: auto;
    overflow-x: hidden;
    position:relative;
}
.featuredTitle {
    text-align: right;
    font-size: 5em;
    width: 35%;
    margin-left: -200%;
    float: left;
    padding: 2%;
}
.featuredCopy {
    text-align: left;
    width: 59%;
    margin-right: -200%;
    float: right;
    font-size: 16px;
    color: #666768;
    line-height: 1.2em;
}
.featuredCopy img {
    height:60px;
    float:left;
}
.featuredCopy h3 {
    line-height: normal;
    padding-left: 60px;
}
.copyBox {
    padding: 4%;
    position:relative;
}
.copyBox:first-child {
    margin-bottom:4%;
}
.featuredTitle, .featuredCopy {
    line-height:1em;
    margin-top: 5%;
    margin-bottom: 5%;
    position:relative;
}
.featuredTransBg {
    background: #fff;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

JavaScript

(function ($) {;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;$.fn.featuredArticle = function (delayLeft, delayRight) {;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
        var $self = this;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
        var $eContainer = $self,;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
            $eLeft =$self.find('.featuredLeft'),;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
            $eRight = $self.find('.featuredRight')
            var init = (function () {;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
            $eContainer.stellar();;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
            $eContainer.waypoint(function (direction) {
                ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
                $eLeft.delay(delayLeft).animate({
                    
                    'margin-left': '0'
                }, 700, 'easeOutCubic', direction === 'down');
                $eRight.delay(delayRight).animate({
                    'margin-right': '0'
                }, 700, 'easeOutCubic', direction === 'down');
            }, {
                offset: '60%'
            });

            // Add this to have the content rest when you scroll up past it
            //
            //			$eContainter.waypoint(function(direction) {
            //                $eLeft.stop().css({
            //					'margin-left':''
            //				}, direction === 'up');
            //                $eRight.stop().css({
            //					'margin-right':''
            //				}, direction === 'up');
            //			}, {
            //				offset: '100%'
            //			});  
            //
            ////////////////////////////////////////////

     ...