Animated Cityscape with CSS
Colorful city buildings using only CSS
<div class="scene">
<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>
body {
body {background:#84dbd7;
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;
}
//Illustration by http://psdblast.com/flat-color- abstract- city- background- psd
//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
});
});
});