JSFiddle - React, Tailwind, and code Playground
by tebrown
HTML
<script src="http://tympanus.net/Blueprints/OnScrollEffectLayout/js/modernizr.custom.js"></script>
<script src="http://tympanus.net/Blueprints/OnScrollEffectLayout/js/cbpScroller.js"></script>
<script src="http://tympanus.net/Blueprints/OnScrollEffectLayout/js/classie.js"></script>
<div id="cbp-so-scroller" class="cbp-so-scroller">
<section class="cbp-so-section">
<article class="cbp-so-side cbp-so-side-left">
<div class="wrapper">
<h2>Lemon drops</h2>
<p>Fruitcake toffee jujubes. Topping biscuit sesame snaps jelly caramels jujubes tiramisu fruitcake. Marzipan tart lemon drops chocolate sesame snaps jelly beans.</p>
</div>
</article>
</section>
<section class="cbp-so-section">
<article class="cbp-so-side cbp-so-side-right">
<h2>Plum caramels</h2>
<p>Lollipop powder danish sugar plum caramels liquorice sweet cookie. Gummi bears caramels gummi bears candy canes cheesecake sweet roll icing dragée. Gummies jelly-o tart. Cheesecake unerdwear.com candy canes apple pie halvah chocolate tiramisu.</p>
</article>
</section>
</div>CSS
.wrapper {
max-width: 1024px;
margin:0px auto;
border:1px solid red;
}
.cbp-so-scroller {
overflow: hidden;
text-align:center;
margin: 0px auto;
}
.cbp-so-section {
margin-bottom: 15em;
}
/* Clear floats of children */
.cbp-so-section:before, .cbp-so-section:after {
content:" ";
display: table;
}
.cbp-so-section:after {
clear: both;
}
/* Text styling */
.cbp-so-section h2 {
font-size: 5em;
font-weight: 300;
line-height: 1;
text-align: center;
width:80%;
}
.cbp-so-section p {
font-size: 2em;
font-weight: 300;
width:80%;
}
/* Sides */
.cbp-so-side {
width: 100%;
float: left;
margin: 0;
overflow: hidden;
min-height: 12em;
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
-moz-transition: -moz-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
/* Clear floats of children */
.cbp-so-side:before, .cbp-so-side:after {
content:" ";
display: table;
}
.cbp-so-side:after {
clear: both;
}
.cbp-so-side-right {
text-align: center;
}
.cbp-so-side-left {
text-align: center;
}
.cbp-so-side-center {
text-align: center;
}
.cbp-so-side-right img {
float: left;
}
.cbp-so-side-left img {
float: right;
}
/* Initial state (hidden or anything else) */
.cbp-so-init .cbp-so-side {
opacity: 0;
}
.cbp-so-init .cbp-so-side-left {
-webkit-transform: translateX(-320px);
-moz-transform: translateX(-320px);
transform: translateX(-320px);
}
.cbp-so-init .cbp-so-side-right {
-webkit-transform: translateX(80px);
-moz-transform: translateX(80px);
transform: translateX(80px);
}
.cbp-so-init .cbp-so-side-center {
-webkit-transform: translateX(80px);
-moz-transform: translateX(80px);
transform: translateX(80px);
}
/* Animated state...JavaScript
new cbpScroller(document.getElementById('cbp-so-scroller'));