-
Notifications
You must be signed in to change notification settings - Fork 16
/
index.html
385 lines (367 loc) · 18.2 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
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!doctype html>
<html class="no-js loading" itemscope itemtype="http://schema.org/CreativeWork">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Alice in Videoland: the Interactive Storybook</title>
<link rel="expect" blocking="render" href="#loading_card">
<meta
name="description"
content="Alice in Videoland is an interactive take on Lewis Carroll's classic tale, Alice in Wonderland, lovingly crafted in HTML5, CSS3, and JavaScript by Rachel Nabors."
/>
<meta
name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"
/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- <script src="js/modernizr.min.js"></script> -->
<script
type="text/javascript"
src="//use.typekit.net/pxo8qyc.js"
></script>
<script type="text/javascript">
try {
Typekit.load();
} catch (e) {}
</script>
<script type="text/javascript">
// analytics
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "UA-3631048-6"]);
_gaq.push(["_trackPageview"]);
(function () {
var ga = document.createElement("script");
ga.type = "text/javascript";
ga.async = true;
ga.src =
("https:" == document.location.protocol
? "https://ssl"
: "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<meta property="og:title" content="Alice in Videoland" />
<meta
property="og:image"
content="http://rachelnabors.com/alice-in-videoland/book/img/i_alice-in-videoland.png"
/>
<meta
property="og:url"
content="http://share.rachelnabors.com/alice/"
/>
<meta
property="og:description"
content="An interactive take on Lewis Carroll's classic tale, lovingly crafted in HTML5, CSS3, and JavaScript by Rachel Nabors."
/>
<link rel="author" href="https://plus.google.com/+RachelNabors/posts" />
<!-- Schema.org markup for Google+ -->
<meta
itemprop="name"
content="Alice in Videoland: the Interactive Storybook"
/>
<meta
itemprop="description"
content="An interactive take on Lewis Carroll's classic tale, lovingly crafted in HTML5, CSS3, and JavaScript by Rachel Nabors."
/>
<meta
itemprop="image"
content="http://rachelnabors.com/alice-in-videoland/book/img/i_alice-in-videoland.png"
/>
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nearestnabors" />
<meta name="twitter:title" content="Alice in Videoland" />
<meta
name="twitter:description"
content="An interactive take on Lewis Carroll's classic tale, lovingly crafted in HTML, CSS5, and JavaScript by @NearestNabors."
/>
<meta
name="twitter:image:src"
content="http://rachelnabors.com/alice-in-videoland/book/img/i_alice-in-videoland.png"
/>
</head>
<body>
<div class="loading-card" id="loading_card">
<h1>Alice in Videoland</h1>
<h2 class="byline">
A retelling of Lewis Carroll's classic in pixels and HTML by
<a href="http://rachelnabors.com">Rachel Nabors</a>
</h2>
</div>
<div class="scene scene-park">
<div class="page page_sitting-in-the-park">
<p class="caption narration">
Alice was beginning to get very bored, sitting by her sister
in the park.
</p>
</div>
<div class="page page_alice-is-bored">
<div class="eyes"></div>
<p>
Her sister was deeply engrossed in a technical book about
web development.
</p>
<p class="caption">
“<span class="dialog dialog_thought"
>How can she read a book with no pictures or dialog in
it?</span
>” Alice wondered to herself.
</p>
</div>
<div class="page page_rabbit-appears">
<div class="blink"></div>
<div class="rabbit"></div>
<p>
She was just about to nod off when suddenly a white rabbit
wearing a vintage tweed porkpie hat dashed by…
looking anxiously at his smartphone!
</p>
<p>The phone chimed at him.</p>
<audio
id="rabbit-phone"
volume="0.1"
src="sound/iphone_alert.mp3"
></audio>
<p class="caption">
“<span class="dialog dialog_exclamation"
>I know! I know! I’m late!</span
>” squeaked the rabbit, more out of annoyance than
concern.
</p>
</div>
<div class="page page_rabbit-chase">
<div class="alice"></div>
<div class="rabbit1"></div>
<div class="rabbit2"></div>
<p>
Naturally Alice had to follow the creature across the park
at once.
</p>
</div>
<div class="page page_the-hole">
<div class="foreground"></div>
<div class="rabbit"></div>
<div class="background"></div>
<div class="bg-hole"></div>
<p>
She was just in time to see him pop down a hole between a
great tree's roots.
</p>
<a href="#tunnel" id="to-tunnels" class="unactivated"
><span>Follow the rabbit?</span></a
>
</div>
</div>
<div class="scene scene-hole" id="tunnels">
<div class="page page_tunnels">
<p>
In another moment down went Alice after him without a
thought as to how she’d get out again. She plummeted head
over heels into what must have been an old, capped well.
</p>
</div>
<div id="tunnel" class="page page_falling">
<div class="alice-falling" id="alice_falling"></div>
<!-- <div class="cheshire-cat"></div> -->
<p>
In another moment down went Alice after him without a
thought as to how she’d get out again. She plummeted head
over heels into what must have been an old, capped well.
</p>
<p>
Either the well was very deep or she fell very slowly, for
she had plenty of time to look about her on the way down.
</p>
<p>
At first it was too dark for her to see anything, but as her
eyes adjusted, she could make out what seemed to be
cupboards, bookshelves, paintings, lining the walls she was
rushing past.
</p>
<p>
Down, down, down she fell. Would it never come to an end?
She began to wonder how many miles she’d fallen and whether
she’d end up at the center of the Earth—or come out
the other side!
</p>
<p>
How would she call her sister? What if she didn’t speak the
language? What if they couldn’t understand her and put her
in an orphanage? She’d never see her sister or her cat
again!
</p>
<p>
Poor Tuna! Would they remember to clean his litter box or
give him his kibble? If only Tuna were with her now. There
were no mice to live on in the air, but perhaps he could
catch a bat.
</p>
<!-- Stretch goal: add video from cheshire folder. Play as background. Then return to the scene with Alice alarmed see also .falling_weird-->
<p>
Before she could worry too much, her eyes grew heavy and she
began to nod off whispering, “Do cats eat bats?” to no one
in particular.
</p>
<p>
She must’ve been dreaming, because for a moment she imagined
he was there with her, as large as her sister.
</p>
<p>
“Oh yes, cats eat bats all the time. You wouldn’t
happen to be a bat, now would you?”
</p>
</div>
</div>
<div class="scene cue" id="scene-cut">
<p>
But before she could answer, her fall came to an end with a
startling thump.
</p>
</div>
<!-- <div class="scene scene-wonderland" id="scene_wonderland">
<div class="page page_crash-landing">
<p>
She tumbled out onto a heap of sticks and leaves at the end
of a long passage. And there, scampering to the other end,
went the White Rabbit in his porkpie hat.
</p>
</div> -->
<!-- If you keep this, use columns/grid, CSS4! -->
<!-- <div class="page page_credits">
<div class="alice"></div>
<div class="rabbit"></div>
<div class="continued">
<h2>
<strong>To be</strong> <span>cont</span
><span>inued</span><span>…</span>
</h2>
<div class="action">
<p class="newsletter">
I can send you an email when the next installment
comes out.
<a href="http://eepurl.com/Gxv1j" class="tell-me"
>Get updates!</a
>
</p>
</div>
<div class="learning">
<p class="author">
<a href="http://rachelnabors.com" class="img-wrap"
><img src="img/p_selfie.png"
/></a>
Say hi at
<a href="http://nearestnabors.com"
>NearestNabors.com</a
>
</p>
<hr />
<h3>How I did it</h3>
<ul>
<li class="learn">
<a
href="https://web.archive.org/web/20131222002736/http://www.adobe.com/inspire/2013/12/interactive-html5-storybook.html"
>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="60px"
height="96px"
viewBox="0 0 60 96"
enable-background="new 0 0 60 96"
xml:space="preserve"
>
<path
fill="#BF5C82"
d="M35.94,34.68c-4.31,4.68-10.02,12.33-16.49,22.52C7.29,76.35-0.45,93.21,2.16,94.87,c2.61,1.66,14.59-12.52,26.75-31.66c6.47-10.19,10.98-18.6,13.38-24.5L35.94,34.68z"
/>
<path
fill="#BF5C82"
d="M37.16,32.74c1.22-6.14,0.87-13.9,9.84-19.73c9.36-6.09,9.49-13.16,9.49-13.16s3.1,2.44,3.48,10.73,c0.49,10.7-4.8,18.73-16.16,25.94L37.16,32.74z"
/>
</svg>
<strong>Designing</strong>
the characters, art & experience
<span class="source">
<span class="at">at</span> Adobe Inspire
</span></a
>
</li>
<li class="code">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
x="0px"
y="0px"
width="100px"
height="100px"
viewBox="0 0 100 100"
enable-background="new 0 0 100 100"
xml:space="preserve"
>
<path
fill="#BF5C82"
d="M2.34 54.1C0.94 53.2 0 51.3 0 49.65c0-1.64 0.7-3.16 2.46-3.98H2.34c8.32-4.92 19.92-11.48 27.65-16.05 v10.9c-3.05 1.76-7.15 3.75-17.45 9.26l0.12 0.12c5.51 2.5 11.8 6.2 17.3 9.49v11.01L2.34 54.1z"
/>
<path
fill="#BF5C82"
d="M97.66 45.9c1.4 0.9 2.3 2.8 2.3 4.45s-0.7 3.16-2.46 3.98h0.12c-8.32 4.92-19.92 11.48-27.65 16.1 V59.49c3.05-1.76 7.15-3.75 17.46-9.25l-0.12-0.12c-5.5-2.46-11.83-6.21-17.34-9.49V29.62L97.66 45.9z"
/>
<path
fill="#BF5C82"
d="M46.4 71.84h-7.01l14.09-43.69h7.13L46.4 71.84z"
/>
</svg>
<strong>Coding</strong>
with vanilla
<abbr title="Hypertext Markup Language"
>HTML</abbr
>,
<abbr title="Cascading Style Sheets">CSS</abbr>5
& <abbr title="JavaScript">JS</abbr>
</li>
<li class="slides">
<a
href="https://github.com/rachelnabors/alice-in-videoland/tree/main/"
>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="34px"
height="32px"
viewBox="0 0 34 32"
enable-background="new 0 0 34 32"
xml:space="preserve"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fill="#BF5C82"
d="M17,0C8.16,0,1,7.34,1,16.41c0,7.25,4.58,13.4,10.94,15.57,c0.8,0.15,1.09-0.36,1.09-0.79c0-0.39-0.01-1.42-0.02-2.79c-4.45,0.99-5.39-2.2-5.39-2.2c-0.73-1.9-1.78-2.4-1.78-2.4,c-1.45-1.02,0.11-1,0.11-1c1.61,0.12,2.45,1.69,2.45,1.69c1.43,2.51,3.74,1.78,4.66,1.36c0.15-1.06,0.56-1.78,1.02-2.19,c-3.55-0.41-7.29-1.82-7.29-8.11c0-1.79,0.62-3.26,1.65-4.4C8.27,10.73,7.72,9.06,8.6,6.8c0,0,1.34-0.44,4.4,1.68,c1.28-0.36,2.64-0.55,4.01-0.55c1.36,0.01,2.73,0.19,4.01,0.55c3.05-2.12,4.4-1.68,4.4-1.68c0.87,2.26,0.32,3.93,0.16,4.34,c1.03,1.15,1.64,2.61,1.64,4.4c0,6.3-3.74,7.69-7.31,8.1c0.57,0.51,1.09,1.51,1.09,3.04c0,2.19-0.02,3.96-0.02,4.5,c0,0.44,0.29,0.95,1.1,0.79C28.42,29.8,33,23.65,33,16.41C33,7.34,25.84,0,17,0z"
/>
</svg>
<span
><strong>Source</strong> Well-commented
source files
<span class="source"
><span class="at">at</span>
github</span
></span
></a
>
</li>
</ul>
</div>
</div>
</div> -->
</div>
<script type="module" src="js/rescripted.js"></script>
</body>
</html>