XJbWom

index.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>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

script.js

//Illustration by http://psdblast.com/flat-color-abstract-city-background-psd
$(window).on('mousemove', function(e) {
        var w = $(window).width();
        var h = $(window).height();
        var offsetX = 0.5 - e.pageX / w;
        var offsetY = 0.5 - e.pageY / h;

        $(".parallax").each(function(i, el) {
            var offset = parseInt($(el).data('offset'));
            var translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * offset) + "px, 0px)";

            $(el).css({
                '-webkit-transform': translate,
                'transform': translate,
                'moz-transform': translate
            });
        });
    });

style.css

body {
  background:skyblue;
  overflow:hidden;
}
.scene {
  position:absolute;
  bottom:0;
  left:0;
  overflow:hidden;
  right:0;
  border-bottom:100px solid #342a2a;
  height:800px;
}
.scene > div {
  position:absolute;
  bottom:0;
}
.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;
 }

XJbWom.markdown

XJbWom

A Pen by Juan Fernando Villa Hernández on CodePen.

License.