JSFiddle - React, Tailwind, and code Playground
HTML
<div class="scene">
<div data-offset="90" class="clouds parallax"></div>
<div data-offset="30" class="trees parallax"></div>
<div data-offset="20" class="grass parallax"></div>
<div data-offset="50" class="buildings parallax"></div>
<div class="ground"></div>
</div>
CSS
body {
background:#84dbd7;
overflow:hidden;
}
.scene {
position:absolute;
bottom:0;
left:0;
overflow:hidden;
right:0;
border-bottom:100px solid #342a2a;
height:800px;
-webkit-transition: -webkit-transform 1s;
-webkit-perspective-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
-webkit-transform: perspective( 960px );
}
.scene > div {
position:absolute;
bottom:0;
-webkit-backface-visibility: hidden;
}
.ground {
width:100%;
height:30px;
background:#1d1818;
z-index:999;
}
.scene > div.clouds {
width:895px;
left:50%;
margin-left:-447px;
height:253px;
bottom:250px;
background:url(http://i.imgur.com/WYfbo0O.png) no-repeat center;
}
.scene div.trees {
width:908px;
height:174px;
background:url(http://i.imgur.com/4JOfJhg.png) no-repeat center;
z-index:100;
left:50%;
bottom:20px;
margin-left:-454px;
}
.scene div.grass {
width:964px;
height:37px;
z-index:200;
left:50%;
bottom:20px;
margin-left:-482px;
background:url(http://i.imgur.com/h0aXbZr.png) no-repeat center;
}
.buildings {
width:763px;
height:303px;
left:50%;
margin-left:-400px;
background:url(http://i.imgur.com/5LmAigM.png) no-repeat center;
}
JavaScript
document.addEventListener('mousemove', function(e){
var offsetX = 0.5 - e.pageX / window.innerWidth,
offsetY = 0.5 - e.pageY / window.innerHeight;
$(".parallax").each(function(i, element) {
var offset = parseInt($(element).data('offset')),
translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * offset) + "px, 0px)";
element.style.webkitTransform = translate;
element.MozTransform = translate;
element.style.transform = translate;
});
});