-
Notifications
You must be signed in to change notification settings - Fork 0
/
page.js
65 lines (57 loc) · 1.48 KB
/
page.js
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
//For testing
function sprite(n) {
if (n == 1) {
document.querySelector("#imgcontainer").className = "bg1";
changeSpriteState(10);
} else {
document.querySelector("#imgcontainer").className = "bg" + n;
changeSpriteState(n-1);
}
}
function changeSpriteState(n) {
setTimeout(function() {
sprite(n);
}, 100)
}
//sprite(10);
//End of testing portion
//functions
function getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
function getHeight() {
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
}
function addEvent() {
document.onmousemove = function(event) {
var x = event.pageX;
var y = event.pageY;
var height = getHeight();
var width = getWidth();
var ratio = y/height;
var frame = Math.round(x*9/width);
var sprite = 10 - frame;
document.querySelector("#imgcontainer").className = "bg" + sprite;
document.querySelector(".o").style.opacity = ratio;
if (frame > 7) {
document.querySelector(".background").style.opacity = 1;
} else {
document.querySelector(".background").style.opacity = 0;
}
}
}
//One-time code
window.onresize = addEvent();
addEvent();