JSFiddle - React, Tailwind, and code Playground
by Alejandro
HTML
<ul class="items">
<li class="item item1">
<div class="inner inner1"></div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit, risus in venenatis tempor, magna diam ultrices justo, in sodales odio tellus vel quam. Nam eros felis, vulputate a porta ac, rutrum in magna. Donec at tellus velit. Duis non nisi pellentesque mauris vehicula adipiscing. Sed sodales consectetur quam in faucibus. Curabitur a turpis in elit elementum vehicula. Proin fermentum bibendum rutrum. Nullam non sagittis nulla. Nulla nisi mi, placerat ac rhoncus pharetra, pharetra at enim. Vestibulum consectetur sem nec orci volutpat dictum eu condimentum eros. Fusce venenatis malesuada metus, non molestie velit sagittis et. Nullam tellus sapien, imperdiet sit amet posuere vel, sagittis nec turpis. In eget neque erat, euismod lobortis nibh. Maecenas lorem sapien, fermentum in pharetra eget, aliquam ac leo. Maecenas adipiscing porttitor turpis, a pretium justo faucibus eget. Nullam eu purus enim. Cras non felis at turpis auctor bibendum sit amet nec tellus. Fusce interdum sem et purus fermentum faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque euismod commodo tellus, at gravida risus imperdiet quis.</div>
</li>
<li class="item item2">
<div class="inner inner2"></div>
<div class="inner-lev1 inner2a"></div>
<div class="inner-lev2 inner2b"></div>
<div class="content">Vivamus tristique, dolor nec vehicula tincidunt, sem risus convallis arcu, sed porttitor magna augue vel nisl. Phasellus ut enim ac neque egestas rhoncus. Praesent diam quam, sodales at ultricies non, pellentesque non quam. Vestibulum tristique dictum facilisis. In id justo orci, a pretium odio. Aliquam elit neque, aliquam vitae vestibulum a, interdum in urna. Nunc nec risus vitae tortor rhoncus molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent lacus purus, imperdiet id...CSS
/* vertical version */
.items{
overflow:hidden;
}
.item{
width:100%;
overflow:hidden;
position:relative;
height:768px;
}
.inner,.inner-lev1,.inner-lev2{
width:100%;
height:100%;
position:absolute;
z-index:1;
}
.content{
background:rgba(255,255,255,0.9);
background:white;
padding:20px;
width:300px;
margin:30px;
position:relative;
z-index:2;
}
/* alterations for horizontal version */
.items-horizontal{
width:5120px;
}
.items-horizontal .item{
width:1024px;
float:left;
}
/* parallax images */
.item1{
background: white url(http://lorempixum.com/1024/768/city/1) 0px 0px fixed no-repeat;
}
.inner1{
background: url(http://lorempixum.com/200/200/people/1) 400px 200px fixed no-repeat;
}
.item2{
background: white url(http://lorempixum.com/1024/768/city/2) 0px 0px fixed no-repeat;
}
.inner2{
background: url(http://lorempixum.com/200/200/people/2) 400px 200px fixed no-repeat;
}
.inner2a{
background: url(http://lorempixum.com/200/200/sports/1) 500px 250px fixed no-repeat;
}
.inner2b{
background: url(http://lorempixum.com/200/200/sports/2) 600px 300px fixed no-repeat;
}
.item3{
background: white url(http://lorempixum.com/1024/768/city/3) 0px 0px fixed no-repeat;
}
.inner3{
background: url(http://lorempixum.com/200/200/people/3) 400px 200px fixed no-repeat;
}
.item4{
background: white url(http://lorempixum.com/1024/768/city/4) 0px 0px fixed no-repeat;
}
.inner4{
background: url(http://lorempixum.com/200/200/people/4) 400px 200px fixed no-repeat;
}
.item5{
background: white url(http://lorempixum.com/1024/768/city/5) 0px 0px fixed no-repeat;
}
.inner5{
background: url(http://lorempixum.com/200/200/people/5) 400px 200px fixed no-repeat;
}JavaScript
/*!
* Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* backgroundPosition cssHook for jquery. Necessary to combat different css property names between browsers
* https://github.com/brandonaaron/jquery-cssHooks
* Licensed under the MIT License (LICENSE.txt).
*/
(function(c){var a=c('<div style="background-position: 3px 5px">');c.support.backgroundPosition=a.css("backgroundPosition")==="3px 5px"?true:false;c.support.backgroundPositionXY=a.css("backgroundPositionX")==="3px"?true:false;a=null;var d=["X","Y"];function b(g){var f=g.split(/\s/),e={X:f[0],Y:f[1]};return e}if(!c.support.backgroundPosition&&c.support.backgroundPositionXY){c.cssHooks.backgroundPosition={get:function(g,f,e){return c.map(d,function(h,j){return c.css(g,"backgroundPosition"+h)}).join(" ")},set:function(e,f){c.each(d,function(j,g){var h=b(f);e.style["backgroundPosition"+g]=h[g]})}}}if(c.support.backgroundPosition&&!c.support.backgroundPositionXY){c.each(d,function(f,e){c.cssHooks["backgroundPosition"+e]={get:function(j,i,g){var h=b(c.css(j,"backgroundPosition"));return h[e]},set:function(h,j){var g=b(c.css(h,"backgroundPosition")),i=e==="X";h.style.backgroundPosition=(i?j:g.X)+" "+(i?g.Y:j)}};c.fx.step["backgroundPosition"+e]=function(g){c.cssHooks["backgroundPosition"+e].set(g.elem,g.now+g.unit)}})}})(jQuery);
/*!
* Scroll-based parallax plugin for jQuery
* Copyright (c) 2011 Dave Cranwell (http://davecranwell.com)
* Licensed under the MIT License.
* 2011-05-18
* version 1.0
*/
(function(a){a.fn.scrollParallax=function(c){var d={speed:0.2,axis:"x,y",debug:false};function b(e){if(d.debug&&"console" in window&&"log" in window.console){console.log(e)}}return this.each(function(){var h=a(this);if(c){a.extend(d,c)}h.bind("inview",function(i,j){if(j==true){h.addClass("inview");b("in view")}else{h.removeClass("inview");b("out of view")}});var f=h.css("backgroundPosition").split(" ");var g=parseInt(f[0].replace(/[^0-9\-]/g,""));var...