parallax.js
1.46 KB
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
/*
* OK, this is not really a parallax... I just want to see my content move
* somewhat faster than the background... hey, ho, let's go
*/
var content, content_top, content_left, content_width, content_height;
var width_delta, height_delta;
function init() {
content = document.getElementById("content");
content_top = parseFloat(window.getComputedStyle(content).top);
content_left = parseFloat(window.getComputedStyle(content).left);
content_width = parseFloat(window.getComputedStyle(content).width);
content_height = parseFloat(window.getComputedStyle(content).height);
var body = document.body,
html = document.documentElement;
var doc = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight);
height_delta = (doc-window.innerHeight)/2;
doc = Math.max(
body.scrollWidth,
body.offsetWidth,
html.clientWidth,
html.scrollWidth,
html.offsetWidth);
width_delta = (doc-window.innerWidth)/2;
window.scrollTo(width_delta, height_delta);
}
function parallax() {
if (! document.documentElement) return;
var v_scroll =
(document.documentElement
&& document.documentElement.scrollTop)
|| document.body.scrollTop;
var h_scroll =
(document.documentElement
&& document.documentElement.scrollLeft)
|| document.body.scrollLeft;
content.style.left = content_left - ((h_scroll - width_delta)/16);
content.style.top = content_top - ((v_scroll - height_delta)/16);
}
// vim: set ts=2 sw=2: