Ajax Loader
HTML
<div class="scene">
1
<div class="scene">
2
  <div data-offset="90" class="clouds parallax"></div>
3
  <div data-offset="30" class="trees parallax"></div>
4
  <div data-offset="20" class="grass parallax"></div>
5
  <div data-offset="50" class="buildings parallax"></div>
6
  <div class="ground"></div>
7
</div>
8
 
9
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS
body {
1
body {
2
  background:#84dbd7;
3
  overflow:hidden;
4
}
5
.scene {
6
  position:absolute;
7
  bottom:0;
8
  left:0;
9
  overflow:hidden;
10
  right:0;
11
  border-bottom:100px solid #342a2a;
12
  height:800px;
13
}
14
.scene > div {
15
  position:absolute;
16
  bottom:0;
17
}
18
.ground {
19
  width:100%;
20
  height:30px;
21
  background:#1d1818;
22
  z-index:999;
23
}
24
.scene > div.clouds {
25
  width:895px;
26
  left:50%;
27
  margin-left:-447px;
28
  height:253px;
29
  bottom:250px;
30
  background:url(http://i.imgur.com/WYfbo0O.png) no-repeat center;
31
}
32
.scene div.trees {
33
  width:908px;
34
  height:174px;
35
  background:url(http://i.imgur.com/4JOfJhg.png) no-repeat center;
36
  z-index:100;
37
  left:50%;
38
  bottom:20px;
39
  margin-left:-454px;
40
}
41
.scene div.grass {
42
  width:964px;
43
  height:37px;
44
  z-index:200;
45
  left:50%;
46
  bottom:20px;
47
  margin-left:-482px;
48
  background:url(http://i.imgur.com/h0aXbZr.png) no-repeat center;
49
}
50
.buildings {  
51
  width:763px;
52
  height:303px;  
53
  left:50%;
54
  margin-left:-400px;
55
  background:url(http://i.imgur.com/5LmAigM.png) no-repeat center;
56
 }
 
JavaScript
//Illustration by http://psdblast.com/flat-color-abstract-city-background-psd
1
//Illustration by http://psdblast.com/flat-color-abstract-city-background-psd
2
$(window).on('mousemove', function(e) {
3
        var w = $(window).width();
4
        var h = $(window).height();
5
        var offsetX = 0.5 - e.pageX / w;
6
        var offsetY = 0.5 - e.pageY / h;
7
 
8
        $(".parallax").each(function(i, el) {
9
            var offset = parseInt($(el).data('offset'));
10
            var translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * offset) + "px, 0px)";
11
 
12
            $(el).css({
13
                '-webkit-transform': translate,
14
                'transform': translate,
15
                'moz-transform': translate
16
            });
17
        });
18
    });
 

Animated Cityscape with CSS

CSSDeck G+