JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://markdalgleish.com/projects/stellar.js/js/stellar.js"></script>
        <div id="container">
            <div id="main">
                <div id="scene-one" class="frame" data-stellar-offset-parent="true">
                    	<div id="one" class="object" data-stellar-ratio="1.5"></div>
                        <div id="two" class="object" data-stellar-ratio="1.15"></div>
                        <div id="three" class="object" data-stellar-ratio="1.1"></div>
                        <div id="four" class="object" data-stellar-ratio="1.05"></div>
                        <div id="five" class="object" data-stellar-ratio="1"></div>
                        <div id="six" class="object" data-stellar-ratio=".9"></div> 	                
                        <div id="seven" class="object" data-stellar-ratio="1.2"></div>
                        <div id="eight" class="object" data-stellar-ratio="1.3"></div>            
                        <div id="nine" class="object" data-stellar-ratio="1.1"></div>                   
                <div id="go-up" class="object">
                    <h1>THIS SHOULD NOW START SCROLLING UP With Parallax</h1>
                    <h2>With vertical scroll bar, going up</h2>
                    <h2>Or with mouse wheel movement</h2>
                    <h2>Or with edge scrolling, but with mouse to the top of the viewport</h2>
                                        <h1>THIS SHOULD NOW START SCROLLING UP With Parallax</h1>
                    <h2>With vertical scroll bar, going up</h2>
                    <h2>Or with mouse wheel movement</h2>
                    <h2>Or with edge scrolling, but with mouse to the top of the viewport</h2>
                                        <h1>THIS SHOULD NOW START SCROLLING UP With Parallax</h1>
                    <h2>With vertical scroll bar, going up</h2>
                    <h2>Or with mouse wheel movement</h2>
                    <h2>Or with edge scrolling, but with mouse to the top...

CSS

#main {
    max-width: 600px;
    width: 100%;
    height: 300px;
    margin: 0px auto;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

#container {
    position: relative;
    height: 656px;
    width: 100%;
}

.object {
    display: block;
    position: absolute;
}


#scene-one {
    background: #FFF;
    width: 4920px;
    height: 100%;
    display: block;
}

#one {
    background: red;
    height: 458px;
    width: 783px;
    left: 0px;
    bottom: 0px;
    z-index: 9;
}

#two {
    background: blue;
    height: 647px;
    width: 225px;
    left: 520px;
    bottom: -115px;
    z-index: 4;
}

#three {
    background: yellow;
    height: 772px;
    width: 293px;
    left: 365px;
    top: 0px;
    z-index: 3;
}

#four {
    background: green;
    height: 851px;
    width: 608px;
    left: 386px;
    top: -55px;
    z-index: 2;
}

#five {
    background: magenta;
    height: 914px;
    width: 834px;
    left: 130px;
    top: -178px;
}

#six{
    background: purple;
    height: 790px;
    width: 400px;
    left: 290px;
    z-index: 10;
}





#seven {
    background: #333;
    height: 580px;
    width: 861px;
    left: 1480px;
    z-index: 10;
}

#eight {
    background: black;
    height: 563px;
    width: 372px;
    left: 2620px;
    top: 0;
    z-index: 5;
}


#nine {
    width: 500px;
    height: 718px;
    background: #333;
    left: 2545px;
    top: 0;
    z-index: 99;
}

#ten {
    width: 400px;
    height: 300px;
    background: #222;
    left: 5510px;
    top: -25px;
    z-index: 99;
}

#go-up {
    background-color:blue;
    width:650px;
    left:3000px;
    overflow-y: scroll;
    height:100%;
    overflow-x:hidden;
}

#go-up h1 {
        color:white;

}

#go-up p {
    position:absolute;
   bottom:0px;
}

JavaScript

$('#main').stellar();