javascript/parallax.html at master · nithinmohan/javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Parallax</title>
<style type="text/css">
body {
padding:0px;
margin:0px;
}
.layer {
position:absolute;
width:100%;
height:256px;
}
#back {
background: #3BB9FF url(cloud.png);
}
#middle{
background: transparent url(hill.png);
}
#front{
background: transparent url(grass.png);
}
</style>
<script src="jquery.js"></script>
<script>
$(function(){
	$back=$("#back");
	$middle=$("#middle");
	$front=$("#front");
var $win=$(window),
speed=0,xPos=0;
$(document).mousemove(function(e){
	pageX=e.pageX;
	winhalfwid=$win.width()/2;
	speed=(winhalfwid-pageX)/(winhalfwid/1);
});
$(document).mouseout(function(){
	speed=0;
});
setInterval(function(){
	xPos+=speed;
	$back.css({
backgroundPosition: xPos + 'px 0px'
});
$middle.css({
backgroundPosition: (xPos * 2) + 'px 0px'
});
$front.css({
backgroundPosition: (xPos * 3) + 'px 0px'
});
}, 30);
});
</script>
</head>
<body>
<div id = "back" class = "layer"></div>
<div id = "middle" class = "layer"></div>
<div id = "front" class = "layer"></div>
</body>
</html>