-
Notifications
You must be signed in to change notification settings - Fork 32
/
Copy pathindex.html
318 lines (310 loc) · 19.1 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Horizonal.js Demo Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="vendor/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="../dist/horizonal.css" />
</head>
<body>
<div id="demo-controls">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-8">
<!--<label for="theme-selector">Current theme:</label>-->
<select id="theme-selector"></select>
</div>
<div class="col-md-6 col-sm-5 col-xs-4">
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="switch" checked>
<label class="onoffswitch-label" for="switch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="col-md-3 col-sm-3 hidden-xs text-right">
<iframe src="http://ghbtns.com/github-btn.html?user=michaelbromley&repo=horizonal&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</div>
</div>
</div>
<div id="root">
<div class="h splash">
<h1>Horizonal.js</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-push-1">
<div class="row">
<div class="col-xs-6 col-sm-5 col-sm-push-1 text-center h">
<a class="cta" href="https://github.com/michaelbromley/horizonal/raw/master/dist/horizonal.zip">
Download
<small>~6k min & zip</small>
</a>
</div>
<div class="col-xs-6 col-sm-5 col-sm-push-1 text-center h">
<a class="cta" href="https://github.com/michaelbromley/horizonal">
View Project on GitHub
</a>
</div>
</div>
<div class="text-center">
<h1>scroll down, swipe or use the <code>↓</code> key</h1>
</div>
<h2 class="hrz-start-new-page">What is it?</h2>
<p>
Horizonal.js takes any static HTML document and transforms it into a collection of discrete "pages". The
transitions between one page an the next can then be programmed via CSS transforms, CSS animations, JavaScript, or any combination of
these.
</p>
<p>
Disable Horizonal with the switch above and you'll see that this is just a regular old HTML document. Try out some of the
themes to get a taste of the kind of effects that can be achieved.
</p>
<h2>What's It For?</h2>
<p>
Horizonal.js grew out of some simple experimentation with CSS transforms and animations, and if nothing else it is a showcase for
the cool visual effects that can be achieved through these technologies.
</p>
<p>
Other use cases could be slides for presentations, image
galleries, portfolios, marketing websites, or whatever else you can think of. Note that this is very much an experimental
project, so be careful and test well before using in production!
</p>
<h2>Features</h2>
<ul>
<li>Fully customizable - limited only by your imagination (and JavaScript & CSS chops)</li>
<li>Touch-enabled: page through the document by swiping.</li>
<li>Keyboard control with arrow keys.</li>
<li>Can handle URL fragments - e.g. <a href="#poem">go to that poem</a></li>
<li>Can handle large elements that span multiple pages - e.g. <a href="#burj-khalifa">this huge photo</a></li>
<li><a href="https://github.com/michaelbromley/horizonal#api">Rich API</a> allowing programmatic control of paging.</li>
<li>Faithfully reproduces even complex layouts using grid systems.</li>
</ul>
<h2>Performance</h2>
<p>
The demos on this page make use of some pretty new features of CSS, and as a result, browser support can be inconsistent at times,
but all should work well on the latest browser versions.
</p>
<p>
Also to note is that the initial calculation of the page layouts is fairly processor-intensive, so on mobile devices in particular,
a little delay in loading is to be expected. Depending on the complexity of the transition effect, your device may exhibit a little
choppiness if it does not have the power to keep up.
</p>
<h2>Try It Out</h2>
<p>
If you know some CSS and JavaScript, try out the interactive playground on Plunker:
</p>
<div class="text-center h">
<a class="cta" href="http://plnkr.co/edit/OxlWVuxXwEf2bhDAss9p?p=preview">
Horizonal Playground
</a>
</div>
<div class="poem">
<h2 class="hrz-start-new-page" id="poem">I Saw a Man Pursuing the Horizon</h2>
<p>I saw a man pursuing the horizon;</p>
<p>Round and round they sped.</p>
<p>I was disturbed at this;</p>
<p>I accosted the man.</p>
<p>"It is futile," I said,</p>
<p>"You can never —"
<br></p>
<p>"You lie," he cried,</p>
<p>And ran on.</p>
<em>— Stephen Crane</em>
</div>
<div class="row">
<div class="col-xs-12">
<h2 class="hrz-start-new-page">The Horizon</h2>
</div>
<div class="col-xs-6 col-md-3">
<img class="thumbnail" src="assets/5366078166_027c226f5a_q.jpg" title="Creative Commons Attribution: https://www.flickr.com/photos/rejik/5366078166/" />
</div>
<div class="col-xs-6 col-md-3">
<img class="thumbnail" src="assets/12205212124_abda6a0a2c_q.jpg" title="Creative Commons Attribution: https://www.flickr.com/photos/halfrain/12205212124/" />
</div>
<div class="col-xs-6 col-md-3">
<img class="thumbnail" src="assets/2170875891_6caa4182cc_q.jpg" title="Creative Commons Attribution: https://www.flickr.com/photos/ehsank/2170875891/" />
</div>
<div class="col-xs-6 col-md-3">
<img class="thumbnail" src="assets/7831711764_72db60a31d_q.jpg" title="Creative Commons Attribution: https://www.flickr.com/photos/chrisschoenbohm/7831711764/" />
</div>
<div class="col-xs-6 col-md-3">
<img class="thumbnail" src="assets/14646922666_6c9e814d46_q.jpg" title="Creative Commons Attribution: https://www.flickr.com/photos/panduadnyana/14646922666/" />
</div>
<div class="col-xs-6 col-md-3">
<img class="thumbnail" src="assets/5890474955_29f879d5ec_q.jpg" title="Creative Commons Attribution: https://www.flickr.com/photos/nasamarshall/5890474955/" />
</div>
<div class="col-xs-6 col-md-3">
<img class="thumbnail" src="assets/1125471764_1f26f271e2_q%20(1).jpg" title="Creative Commons Attribution: https://www.flickr.com/photos/generalnoir/1125471764/" />
</div>
<div class="col-xs-6 col-md-3">
<img class="thumbnail" src="assets/6143615821_03f301925e_q%20(1).jpg" title="Creative Commons Attribution: https://www.flickr.com/photos/donkeyhotey/6143615821/" />
</div>
</div>
<p>
The <b>horizon</b> (or <b>skyline</b>) is the apparent line that separates earth from sky, the line that divides all visible
directions into two categories: those that intersect the Earth's surface, and those that do not. At many locations, the
<i>true horizon</i> is obscured by trees, buildings, mountains, etc., and the resulting intersection of earth and sky is called
the <i>visible horizon</i>. When looking at a sea from a shore, the part of the sea closest to the horizon is called the
<i>offing</i>.
The word <i>horizon</i> derives from the Greek "ὁρίζων κύκλος" <i>horizōn kyklos</i>, "separating circle", from the verb <a href="//en.wiktionary.org/wiki/%E1%BD%81%CF%81%CE%AF%CE%B6%CF%89" class="extiw" title="wikt:ὁρίζω">ὁρίζω</a> <i>horizō</i>, "to divide", "to separate",
and that from "ὅρος" (<i>oros</i>), "boundary, landmark".
</p>
<h2><span class="mw-headline" id="Appearance_and_usage">Appearance and usage</span></h2>
<div class="row">
<div class="col-md-8">
<p>
Historically, the distance to the visible horizon at sea has been extremely important as it represented the maximum range of
communication and vision before the development of the radio and the telegraph. Even today, when flying an aircraft under Visual
Flight Rules, a technique called attitude flying is used to control the aircraft, where the pilot uses the visual relationship
between the aircraft's nose and the horizon to control the aircraft. A pilot can also retain his or her spatial orientation by referring to the horizon.
</p>
<p>
In many contexts, especially perspective drawing, the curvature of the Earth is disregarded and the horizon is considered the theoretical line to
which points on any horizontal plane converge (when projected onto the picture plane) as their distance from the observer increases. For observers
near sea level the difference between this <i>geometrical horizon</i> (which assumes a perfectly flat, infinite ground plane) and the <i>true horizon</i>
(which assumes a spherical Earth surface) is imperceptible to the naked eye (but for someone on a 1000-meter hill looking out to sea the true horizon
will be about a degree below a horizontal line).
</p>
<p>
In astronomy the horizon is the horizontal plane through (the eyes of) the observer. It is the fundamental plane of the horizontal coordinate system,
the locus of points that have an altitude of zero degrees. While similar in ways to the geometrical horizon, in this context a horizon may be considered
to be a plane in space, rather than a line on a picture plane.
</p>
</div>
<div class="col-md-4">
<img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Earth%27s_horizon_as_seen_from_Shuttle_Endeavour.jpg/220px-Earth%27s_horizon_as_seen_from_Shuttle_Endeavour.jpg" width="220" height="145" class="thumbimage" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Earth%27s_horizon_as_seen_from_Shuttle_Endeavour.jpg/330px-Earth%27s_horizon_as_seen_from_Shuttle_Endeavour.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Earth%27s_horizon_as_seen_from_Shuttle_Endeavour.jpg/440px-Earth%27s_horizon_as_seen_from_Shuttle_Endeavour.jpg 2x" data-file-width="2980" data-file-height="1968">
</div>
</div>
<h2><span class="mw-headline" id="Distance_to_the_horizon">Distance to the horizon</span></h2>
<p>
Ignoring the effect of atmospheric refraction, distance to the horizon from an observer close to the Earth's surface is about
</p>
<dl>
<dd><img class="mwe-math-fallback-png-inline tex" alt="d \approx 3.57\sqrt{h} \,," src="//upload.wikimedia.org/math/f/c/9/fc99cd32db01b85175e2a304c6441940.png"></dd>
</dl>
<p>where <i>d</i> is in kilometres and <i>h</i> is height above ground level in metres.</p>
<p>Examples:</p>
<ul>
<li>For an observer standing on the ground with <i>h</i> = 1.70 metres (5 ft 7 in) (average eye-level height), the horizon is at a distance of 4.7 kilometres (2.9 mi).</li>
<li>For an observer standing on the ground with <i>h</i> = 2 metres (6 ft 7 in), the horizon is at a distance of 5 kilometres (3.1 mi).</li>
<li>For an observer standing on a hill or tower of 100 metres (330 ft) in height, the horizon is at a distance of 36 kilometres (22 mi).</li>
<li>For an observer standing at the top of the <a href="#burj-khalifa" title="Burj Khalifa">Burj Khalifa</a> (828 metres (2,717 ft) in height), the horizon is at a distance of 103 kilometres (64 mi).</li>
<li>For an observer atop Mount Everest (8,848 metres (29,029 ft) altitude), the horizon is at a distance of 336 kilometres (209 mi).</li>
</ul>
<p>
With <i>d</i> in miles and <i>h</i> in feet,
</p>
<dl>
<dd><img class="mwe-math-fallback-png-inline tex" alt="d \approx 1.22\sqrt{h} \,." src="//upload.wikimedia.org/math/0/9/c/09c3a696f80a0d375ba87cd30b15a94f.png"></dd>
</dl>
<p>Examples, assuming no refraction:</p>
<ul>
<li>For an observer on the ground with eye level at <span class="nowrap"><i>h</i> = 5 ft 7 in</span> (1.70 m), the horizon is at a distance of 2.9 miles (4.7 km).</li>
<li>For an observer standing on a hill or tower 100 feet (30 m) in height, the horizon is at a distance of 12.2 miles (19.6 km).</li>
<li>For an observer on the summit of Aconcagua (22,841 feet (6,962 m) in height), the sea-level horizon to the west is at a distance of 184 miles (296 km).</li>
<li>For U-2 pilot, whilst flying at its service ceiling 70,000 feet (21,000 m), the horizon is at a distance of 324 miles (521 km)</li>
</ul>
<h3><span class="mw-headline" id="Geometrical_model">Geometrical model</span></h3>
<div class="row">
<div class="col-md-4 diagrams">
<img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b4/CircleChordTangent.png/300px-CircleChordTangent.png" width="300" height="226" class="thumbimage"
srcset="//upload.wikimedia.org/wikipedia/commons/b/b4/CircleChordTangent.png 1.5x, //upload.wikimedia.org/wikipedia/commons/b/b4/CircleChordTangent.png 2x"
data-file-width="304" data-file-height="229"><br>
<img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/2/21/GeometricDistanceToHorizon.png/300px-GeometricDistanceToHorizon.png" width="300" height="209" class="thumbimage"
srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/21/GeometricDistanceToHorizon.png/450px-GeometricDistanceToHorizon.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/2/21/GeometricDistanceToHorizon.png/600px-GeometricDistanceToHorizon.png 2x"
data-file-width="800" data-file-height="558"><br>
<img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Horizons.svg/300px-Horizons.svg.png" width="300" height="190" class="thumbimage"
srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Horizons.svg/450px-Horizons.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Horizons.svg/600px-Horizons.svg.png 2x"
data-file-width="679" data-file-height="430">
</div>
<div class="col-md-8">
<p id="test">
If the Earth is assumed to be a sphere with no atmosphere then the distance to the horizon can easily be calculated. (The Earth's radius of curvature actually varies by 1% between
the Equator and the Poles, so this formula isn't absolutely exact even assuming no refraction.)
</p>
<p>The secant-tangent theorem states that</p>
<dl>
<dd><img class="mwe-math-fallback-png-inline tex" alt="\mathrm{OC}^2 = \mathrm{OA} \times \mathrm{OB} \,." src="//upload.wikimedia.org/math/a/b/c/abc2dd492b4dd114f347a2be4cbfbe1a.png"></dd>
</dl>
<p>Make the following substitutions:</p>
<ul>
<li><i>d</i> = OC = distance to the horizon</li>
<li><i>D</i> = AB = diameter of the Earth</li>
<li><i>h</i> = OB = height of the observer above sea level</li>
<li><i>D+h</i> = OA = diameter of the Earth plus height of the observer above sea level</li>
</ul>
<p>The formula now becomes</p>
<dl>
<dd><img class="mwe-math-fallback-png-inline tex" alt="d^2 = h(D+h)\,\!" src="//upload.wikimedia.org/math/a/1/c/a1ca657d77099b0f3f40380db9809545.png"></dd>
</dl>
<p>or</p>
<dl>
<dd><img class="mwe-math-fallback-png-inline tex" alt="d = \sqrt{h(D+h)} =\sqrt{h(2R+h)}\,," src="//upload.wikimedia.org/math/c/3/b/c3bd10143ccd5236009b81dc50e6a950.png"></dd>
</dl>
<p>where <i>R</i> is the radius of the Earth.</p>
<p>
The equation can also be derived using the Pythagorean theorem. Since the line of sight is a tangent to the Earth, it is perpendicular to the radius at the horizon.
This sets up a right triangle, with the sum of the radius and the height as the hypotenuse. With
</p>
<ul>
<li><i>d</i> = distance to the horizon</li>
<li><i>h</i> = height of the observer above sea level</li>
<li><i>R</i> = radius of the Earth</li>
</ul>
<p>referring to the second figure at the right leads to the following:</p>
<dl>
<dd><img class="mwe-math-fallback-png-inline tex" alt="(R+h)^2 = R^2 + d^2 \,\!" src="//upload.wikimedia.org/math/1/f/2/1f21db99f050d486a8f581f65c40e0d7.png"></dd>
<dd><img class="mwe-math-fallback-png-inline tex" alt="R^2 + 2Rh + h^2 = R^2 + d^2 \,\!" src="//upload.wikimedia.org/math/6/c/8/6c809b1fb521403a146a52c190606e30.png"></dd>
<dd><img class="mwe-math-fallback-png-inline tex" alt="d = \sqrt{h(2R + h)} \,." src="//upload.wikimedia.org/math/1/9/6/196a275b743ef85d7119c5c14bf20a28.png"></dd>
</dl>
<p>Another relationship involves the distance <i>s</i> along the curved surface of the Earth to the horizon; with <i>γ</i> in <a href="/wiki/Radian" title="Radian">radians</a>,</p>
<dl>
<dd><img class="mwe-math-fallback-png-inline tex" alt="s = R \gamma \,;" src="//upload.wikimedia.org/math/9/4/c/94ca60d254a3fbc0866d1184b4448947.png"></dd>
</dl>
<p>then</p>
<dl>
<dd><img class="mwe-math-fallback-png-inline tex" alt="\cos \gamma = \cos\frac{s}{R}=\frac{R}{R+h}\,." src="//upload.wikimedia.org/math/5/2/c/52cf9ffae9fd83e0f7f766a6c8b8f0c2.png"></dd>
</dl>
<p>Solving for <i>s</i> gives</p>
<dl>
<dd><img class="mwe-math-fallback-png-inline tex" alt="s=R\cos^{-1}\frac{R}{R+h} \,." src="//upload.wikimedia.org/math/1/3/9/139b1866d1622a6ef8680daea1d74e0c.png"></dd>
</dl>
<p>The distance <i>s</i> can also be expressed in terms of the line-of-sight distance <i>d</i>; from the second figure at the right,</p>
<dl>
<dd><img class="mwe-math-fallback-png-inline tex" alt="\tan \gamma = \frac {d} {R} \,;" src="//upload.wikimedia.org/math/4/6/e/46e11814ea75d950f1d9fddf58286bd3.png"></dd>
</dl>
<p>substituting for <i>γ</i> and rearranging gives</p>
<dl>
<dd><img class="mwe-math-fallback-png-inline tex" alt="s=R\tan^{-1}\frac{d}{R} \,." src="//upload.wikimedia.org/math/1/e/8/1e8d5c2258f20a8c21b87c2912fe4091.png"></dd>
</dl>
<p>The distances <i>d</i> and <i>s</i> are nearly the same when the height of the object is negligible compared to the radius (that is, <i>h</i> ≪ <i>R</i>).</p>
</div>
</div>
<h2 id="burj-khalifa">Multi-page spanning</h2>
<p>
For an observer standing at the top of the Burj Khalifa
(828 metres (2,717 ft) in height), the horizon is at a distance of 103 kilometres (64 mi).
</p>
<div class="text-center">
<img src="assets/Burj_Khalifa.jpg" title="'Burj Khalifa' by Donaldytong - commons:File:Burj Khalifa.jpg. Via Wikipedia - http://en.wikipedia.org/wiki/File:Burj_Khalifa.jpg#mediaviewer/File:Burj_Khalifa.jpg" />
</div>
<div class="text-center h">
<p></p>
<p></p>
© 2014 <a href="http://www.michaelbromley.co.uk">Michael Bromley</a>
</div>
</div>
</div>
</div>
</div>
<script src="vendor/jquery.min.js"></script>
<script src="../dist/horizonal.debug.js"></script>
<script src="themes/themes.js"></script>
<script src="script.js"></script>
</body>
</html>