-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (121 loc) · 4.89 KB
/
index.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- metadata you need to fill in -->
<title>An Infinite Tree</title>
<meta name="description" content="An infinite tree.">
<link rel="icon" type="image/png" href="favicon.ico">
<meta property="og:image" content="http://joshdata.github.io/infinite-tree/square.png" />
<meta name="twitter:creator" content="@JoshData" />
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #444;
}
#container > div {
width: 100vw;
height: 100vh;
background-image: url('infinite-tree-1600px.jpeg');
background-size: cover;
background-position: 0 0;
}
@media (max-width: 1200px) {
#container > div {
background-image: url('infinite-tree-1200px.jpeg');
}
}
@media (max-width: 1024px) {
#container > div {
background-image: url('infinite-tree-1024px.jpeg');
}
}
@media (max-width: 768px) {
#container > div {
background-image: url('infinite-tree-768px.jpeg');
}
}
@media (max-width: 640px) {
#container > div {
background-image: url('infinite-tree-640px.jpeg');
}
}
</style>
</head>
<body>
<!--[if lt IE 8]><p>Internet Explorer version 8 or any modern web browser is required to use this website, sorry.<![endif]-->
<!--[if gt IE 7]><!-->
<div id="container" onmousedown="return false"> <!-- disable click & drag -->
<!-- a grid of nine tiles will keep the screen always filled -->
<div data-tile-x="0" data-tile-y="0"> </div>
<div data-tile-x="1" data-tile-y="0"> </div>
<div data-tile-x="2" data-tile-y="0"> </div>
<div data-tile-x="0" data-tile-y="1"> </div>
<div data-tile-x="1" data-tile-y="1"> </div>
<div data-tile-x="2" data-tile-y="1"> </div>
<div data-tile-x="0" data-tile-y="2"> </div>
<div data-tile-x="1" data-tile-y="2"> </div>
<div data-tile-x="2" data-tile-y="2"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
var frame_rate = 1000/32; // i.e. initially 32 frames per second
var anim_delta = [.25, -1];
var tiles_offset = [0, 0]; // current tile position, pixel offset of the (1,1) tile
function layout_tiles() {
// Lay out the tiles.
// First get the tile size, which will extend the tile on the side it
// was cropped in order to 'cover' the window.
var ar = 7143/1675;
var w = parseInt($(window).innerWidth());
var h = parseInt($(window).innerHeight());
if (h < parseInt(w*ar))
h = parseInt(w*ar);
else
w = parseInt(h/ar);
// Keep tiles_offset[0], tiles_offset[1] in bounds --- wrap exactly so that the displayed
// image is the same, even though the tiles have moved.
if (tiles_offset[0] > w) tiles_offset[0] -= w;
if (tiles_offset[0] < -w) tiles_offset[0] += w;
if (tiles_offset[1] > h) tiles_offset[1] -= h;
if (tiles_offset[1] < -h) tiles_offset[1] += h;
// Position & size the tiles.
$('#container > div').each(function() {
$(this).css({
position: 'absolute',
width: w,
height: h,
backgroundSize: '100%', // now use regular scaling since 'cover' is choppy on mobile Chrome
left: w * (parseInt($(this).attr('data-tile-x'))-1) - parseInt(tiles_offset[0]), // round to avoid sub-pixel positions
top: h * (parseInt($(this).attr('data-tile-y'))-1) - parseInt(tiles_offset[1])
});
})
}
layout_tiles();
function animation_frame() {
// adjust the frame rate within the bounds of [10ms, 250ms] so that
// each update is a one-pixel move.
var md = Math.max(Math.abs(anim_delta[0]), Math.abs(anim_delta[1]));
var f = parseInt(frame_rate / md);
if (f < 10) f = 10;
if (f > 250) f = 250;
tiles_offset[0] += anim_delta[0] * (f/frame_rate);
tiles_offset[1] += anim_delta[1] * (f/frame_rate);
layout_tiles()
setTimeout(animation_frame, f);
}
setTimeout(animation_frame, 500);
// adjust animation speed through the scroll wheel
$(window).on('wheel', function(e) {
anim_delta[0] -= e.originalEvent.deltaX/100;
anim_delta[1] += e.originalEvent.deltaY/100;
})
});
</script>
</body>
</html>