-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnogi_4.html
67 lines (61 loc) · 1.89 KB
/
nogi_4.html
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
63
64
65
66
67
<html>
<head>
<style>
body{
padding:0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="sky"><img src="img/main.jpg" onload="resize(this);"/></div>
<div id="ground"><img src="img/ground.png" onload="resize(this);"/></div>
<script>
var movS = 0.05;
var movG = 0.1;
var sky = document.getElementById('sky');
var ground = document.getElementById('ground');
var cx,cy,baseXS,baseYS,baseXG,baseYG;
function init(){
cx = window.innerWidth/2;
cy = window.innerHeight/2;
sky.style.width = window.innerWidth*(1+movS) + 'px';
sky.style.height = window.innerHeight*(1+movS) + 'px';
baseXS = -cx*movS;
baseYS = -cy*movS;
sky.style.marginLeft = baseXS + 'px';
sky.style.marginTop = baseYS + 'px';
ground.style.width = window.innerWidth*(1+movG) + 'px';
ground.style.height = window.innerHeight*(1+movG) + 'px';
baseXG = -cx*movG;
baseYG = -cy*movG;
ground.style.marginLeft = baseXG + 'px';
ground.style.marginTop = baseYG + 'px';
}
init();
window.onload = function(){
document.body.addEventListener('mousemove', function(e){
let degx = cx - e.clientX;
let degy = cy - e.clientY;
sky.style.marginLeft = ~~(degx*movS) + baseXS + 'px';
sky.style.marginTop = ~~(degy*movS) + baseYS + 'px';
ground.style.marginLeft = ~~(degx*movG) + baseXG + 'px';
ground.style.marginTop = ~~(degy*movG) + baseYG + 'px';
});
};
window.onresize = function(){
init();
};
function resize(that){
if (that.width > that.height) {
that.setAttribute('style', 'width: 100%');
} else {
that.setAttribute('style', 'height: 100%');
}
}
</script>
</body>
</html>