JSFiddle - React, Tailwind, and code Playground
HTML
<div id="intro">
<div data-offset="90" class="moon parallax"></div>
<div data-offset="90" class="buildings parallax"></div>
<div class="boutique"></div>
</div>
CSS
* {
margin: 0 0;
padding: 0 0;
}
#intro {
}
div {
display: inline-block;
position: absolute;
left: -10%;
background-size: contain;
background-repeat: no-repeat;
width: 120%;
height: 1500px;
}
.moon {
background-image: url(http://i1383.photobucket.com/albums/ah298/Islam_Ibakaev/layer_1_zpsgiw00xpr.jpg);
top: -60px;
position: absolute;
}
.buildings {
background-image: url(http://i1383.photobucket.com/albums/ah298/Islam_Ibakaev/layer_2_zpswwieufln.png);
}
.boutique {
background-image: url(http://i1383.photobucket.com/albums/ah298/Islam_Ibakaev/layer_3_zpsr8y5btd5.png)
}
JavaScript
document.getElementById('intro').onmousemove = function(e) {
var w = window.innerWidth;
var offsetX = 0.5 - e.pageX / w;
var moon = document.getElementsByClassName('moon')[0];
var buildings = document.getElementsByClassName('buildings')[0];
var offsetForM = parseInt(moon.getAttribute('data-offset'));
var offsetForB = parseInt(buildings.getAttribute('data-offset'));
var translateM = "translate(" + Math.round(offsetX * offsetForM) + "px";
var translateB = "translate(-" + Math.round(offsetX * offsetForB) + "px";
moon.style.webkitTransform = translateM;
moon.style.MozTransform = translateM;
moon.style.transform = translateM;
buildings.style.webkitTransform = translateB;
buildings.style.MozTransform = translateB;
buildings.style.transform = translateB;
};