Space Parallax
An awesome parallax demonstration using no plugins.
Move your mouse.
Space pictures: CSSTricks
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Space Parallax</h1>
<div id="foreground"></div>
<div id="background"></div>
h1 {
h1 {color: white;
font-family: "Lato", Arial;
text-align: center;
z-index: 2;
position: relative;
}
div {position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#background {z-index:1;
background: url(http://css-tricks.com/examples/StarryNightCSS3/images/background.png);
}
#midground {z-index: 2;
background: url(http://css-tricks.com/examples/StarryNightCSS3/images/midground.png);
}
#foreground {z-index: 3;
background: url(http://css-tricks.com/examples/StarryNightCSS3/images/foreground.png);
}
var strength1 = 50;
var strength1 = 50;
var strength2 = 100;
var strength3 = 200;
$("html").mousemove(function(e){
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = 1* pageX * -1;
var newvalueY = 1* pageY * -1;
$('#background').css("background-position", (strength1 / $(window).width() * pageX * -1)+"px "+(strength1 / $(window).height() * pageY * -1)+"px");
$('#middleground').css("background-position", (strength2 / $(window).width() * pageX * -1)+"px "+(strength2 / $(window).height() * pageY * -1)+"px");
$('#foreground').css("background-position", (strength3 / $(window).width() * pageX * -1)+"px "+(strength3 / $(window).height() * pageY * -1)+"px");
});