Test simple Parallax effect
HTML
<div id="top" class="bg"></div>
<div id="mid" class="bg"></div>
<div id="bottom" class="bg"></div>
CSS
.bg {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
#top {
z-index:1;
background:url('http://placehold.it/350x350&text=theTopLayer');
}
#mid {
z-index:2;
background:url('http://placehold.it/100x100&text=theMidLayer');
opacity:.5;
}
#bottom {
z-index:3;
background:url('http://placehold.it/350x350&text=theBottomLayer');
opacity:.25;
}
JavaScript
function animateThis() {
$('#top').css("background-position", "-=2");
$('#mid').css("background-position", "-=8");
$('#bottom').css("background-position", "-=12");
}
setInterval(animateThis, 100);