-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
303 lines (259 loc) · 13.7 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
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Demo for Alice's Adventures in Wonderland, by Lewis Carroll</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
</head>
<body>
<!-- overlay for fade to black -->
<div id="overlay"></div>
<!-- keyframes for use by scroll driver -->
<div id="timeline"></div>
<!-- alternate navigation for mouse, keyboard. Autogenerated links -->
<nav></nav>
<!-- introduction slide and feature detect message -->
<div id="intro">
<header>Demo for Alice in Wonderland <span>by Lewis Carroll</span></header>
<p>
Using <a href="http://html.adobe.com/webplatform/layout/shapes/" target="_blank">CSS Shapes</a> to enhance visual storytelling.
</p>
<div class="warning">
<p>
This example demonstrates cutting-edge features that the <a href="http://html.adobe.com/webplatform/" target="_blank">Adobe Web Platform Team</a> is working on. To see these features in action, <a href="http://html.adobe.com/webplatform/enable/" target="_blank">enable CSS Regions and CSS Shapes</a> in the <a href="https://www.google.com/intl/en/chrome/browser/canary.html">Google Chrome Canary</a> browser.
<br /><br />
<a href="http://html.adobe.com/webplatform/layout/regions/browser-support/" target="_blank">CSS Regions Support Matrix</a>, <a href="http://html.adobe.com/webplatform/layout/shapes/browser-support/" target="_blank">CSS Shapes Support Matrix</a>.
</p>
</div>
<div class="direction">
<div class="illustration">
<span></span>
<span></span>
<span></span>
</div><em>scroll to begin</em>
</div>
<footer>
<a href="http://html.adobe.com" class="adobe-logo" target="_blank">html.adobe.com</a>
<a href="http://ultranoir.com" class="ultranoir-logo" target="_blank">ultranoir.com</a>
</footer>
</div>
<div class="wrapper">
<div id="scene1">
<div class="content">
<h1>
<span>Alice in Wonderland</span>
</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the
bank, and of having nothing to do: once or twice she had peeped into the
book her sister was reading, but it had no pictures or conversations in
it, 'and what is the use of a book,' thought Alice 'without pictures or
conversation?'
<br /><br />So she was considering in her own mind whether the pleasure
of making a daisy-chain would be worth the trouble of getting up and
picking the daisies, when suddenly a White Rabbit with pink eyes ran
close by her.
<br /><br />In another moment down went Alice after it, never once considering how
in the world she was to get out again.
</p>
</div>
</div><!-- end #scene1 -->
<div id="scene2">
<div class="decoration">
<div class="alice-shape falling1"></div>
<div class="content-wrapper">
<p>
The rabbit-hole went straight on like a tunnel for some way, and then
dipped suddenly down, so suddenly that Alice had not a moment to think
about stopping herself before she found herself falling down a very deep
well.
<br /><br />
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next.
</p>
</div>
<div class="alice-shape falling2"></div>
</div>
<div class="content">
<!-- alice sitting on mushroom -->
<div class="act1">
<div class="alice-shape"></div>
</div>
<!-- caterpillar night & day act -->
<div class="act2">
<div class="caterpillar-shape light"></div>
<div class="caterpillar-shape dark"></div>
<div class="shadow-container">
<!-- IDEA: use a <canvas> overlay for shadows -->
<div class="shadow shadow1"></div>
<div class="shadow shadow2"></div>
<div class="shadow shadow3"></div>
<div class="shadow shadow4"></div>
<div class="shadow shadow5"></div>
</div>
</div>
<div class="dialogue dialogue1">
<div class="caterpillar">
<p>'You!' said the Caterpillar contemptuously. 'Who are YOU?'</p>
</div>
<p class="alice">I—I hardly know, sir, just at present—at least I know who I WAS when I got up this morning, but I think I must have been changed several times since then.</p>
</div>
<div class="dialogue dialogue2">
<div class="caterpillar">
<p>'What do you mean by that?' said the Caterpillar sternly. 'Explain yourself!'</p>
</div>
<p class="alice">I'm afraid I can't put it more clearly for I can't understand it myself to begin with; and being so many different sizes in a day is very confusing.</p>
</div>
<div class="dialogue dialogue3">
<div class="caterpillar">
<p>So you think you're changed, do you?</p>
</div>
<p class="alice">I'm afraid I am, sir. I can't remember things as I used—and I don't keep the same size for ten minutes together!</p>
</div>
<div class="dialogue dialogue4">
<div class="caterpillar">
<p>What size do you want to be?</p>
</div>
<p class="alice">Oh, I'm not particular as to size; only one doesn't like changing so often, you know.</p>
</div>
<div class="dialogue dialogue5">
<div class="caterpillar">
<p>One side will make you grow taller, and the other side will make you grow shorter.</p>
</div>
<p class="alice">One side of WHAT? The other side of WHAT?</p>
</div>
</div>
</div><!-- end #scene2 -->
<div id="scene3_1">
<div class="content">
<div class="cat-shape1"></div>
<p>
'There's certainly too much pepper in that soup!' Alice said to herself, as well as she could for sneezing.
<br /><br />There was certainly too much of it in the air. Even the Duchess sneezed occasionally; and as for the baby, it was sneezing and howling alternately without a moment's pause. The only things in the kitchen that did not sneeze, were the cook, and a large cat which was sitting on the hearth and grinning from ear to ear.
</p>
<div class="cat-shape2"></div>
<p>
'Please would you tell me,' said Alice, a little timidly, for she was not quite sure whether it was good manners for her to speak first, 'why your cat grins like that?'
'It's a Cheshire cat,' said the Duchess, 'and that's why. Pig!'
</p>
<div class="cat-shape3"></div>
<p>
'I didn't know that Cheshire cats always grinned; in fact, I didn't know that cats COULD grin.'
'They all can,' said the Duchess; 'and most of 'em do.'
</p>
<div class="cat-shape4"></div>
<p>
'I don't know of any that do,' Alice said very politely, feeling quite pleased to have got into a conversation.
<br /><br />
'You don't know much,' said the Duchess; 'and that's a fact.'
<br /><br />
Alice did not at all like the tone of this remark, and thought it would be as well to introduce some other subject of conversation.
</p>
</div>
</div><!-- end #scene3_1 -->
<div id="scene3_2">
<div class="content">
<div class="act act1">
<div class="cat-shape5"></div>
<p>
The Cat only grinned when it saw Alice. It looked good-natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.
'Cheshire Puss,' she began, rather timidly, as she did not at all know whether it would like the name: however, it only grinned a little wider. 'Come, it's pleased so far,' thought Alice, and she went on. 'Would you tell me, please, which way I ought to go from here?'
</p>
</div>
<div class="act act2">
<div class="cat-shape cat-shape-walking"></div>
<div class="content-wrapper">
<p>
'In THAT direction,' the Cat said, waving its right paw round, 'lives a Hatter: and in THAT direction,' waving the other paw, 'lives a March Hare. Visit either you like: they're both mad.'
'But I don't want to go among mad people,' Alice remarked.
'Oh, you can't help that,' said the Cat: 'we're all mad here. I'm mad. You're mad.'
</p>
<p>
'Call it what you like,' said the Cat. 'Do you play croquet with the Queen to-day?'
'I should like it very much,' said Alice, 'but I haven't been invited yet.'
</p>
<p>
'You'll see me there,' said the Cat, and vanished.
</p>
</div>
</div>
<div class="act act3">
<div class="alice-shape"></div>
<div class="content-wrapper">
<div class="cat-paws-shape"></div>
<p>Alice waited a little, half expecting to see it again, but it did not appear, and after a minute or two she walked on in the direction in which the March Hare was said to live. </p>
</div>
</div>
<div class="act act4">
<div class="alice-shape"></div>
<div class="content-wrapper">
<p>
She had not gone much farther before she came in sight of the house of the March Hare: she thought it must be the right house, because the chimneys were shaped like ears and the roof was thatched with fur. It was so large a house, that she did not like to go nearer till she had nibbled some more of the lefthand bit of mushroom, and raised herself to about two feet high: even then she walked up towards it rather timidly, saying to herself <br /><br />'Suppose it should be raving mad after all!
</p>
</div>
</div>
<div class="act act5">
<div class="alice-shape"></div>
</div>
<div class="act act6">
<div class="content-wrapper">
<div class="cat-head">
<div class="state state-1"></div>
<div class="state state-2"></div>
<div class="state state-3"></div>
<div class="state state-4"></div>
<div class="state state-5"></div>
<div class="state state-6"></div>
<div class="state state-7"></div>
<div class="state state-8"></div>
<div class="state state-9"></div>
<div class="state state-10"></div>
<div class="state state-11"></div>
<div class="state state-12"></div>
</div>
<p>
She was looking about for some way of escape, and wondering whether she could get away without being seen, when she noticed a curious appearance in the air: it puzzled her very much at first, but, after watching it a minute or two, she made it out to be a grin, and she said to herself 'It's the Cheshire Cat!'
</p>
<p>
'How are you getting on?' said the Cat, as soon as there was mouth enough for it to speak with.
</p>
<p>
Alice waited till the eyes appeared, and then nodded. 'It's no use speaking to it,' she thought, 'till its ears have come, or at least one of them.' In another minute the whole head appeared, and then Alice put down her flamingo, and began an account of the game.
</p>
<p>
'How do you like the Queen?' said the Cat in a low voice.
</p>
<div class="region" id="region1"></div>
<div class="region" id="region2"></div>
</div><!-- end .content-wrapper -->
</div><!-- end .act6 -->
</div>
</div><!-- end #scene3_2 -->
</div><!-- end .wrapper -->
<script src="third-party/greensock/TweenMax.min.js"></script>
<script src="third-party/greensock/plugins/ScrollToPlugin.min.js"></script>
<script src="third-party/jquery/jquery-2.0.3.min.js"></script>
<script src="third-party/superscrollorama/jquery.superscrollorama.js"></script>
<script src="js/scroll-driver.js"></script>
<script>
(function(){
// typekit asyc loading
var config = {
kitId: 'fwk6qwz',
scriptTimeout: 1500
};
var h=document.getElementsByTagName("html")[0];h.className+=" wf-loading";var t=setTimeout(function(){h.className=h.className.replace(/(\s|^)wf-loading(\s|$)/g," ");h.className+=" wf-inactive"},config.scriptTimeout);var tk=document.createElement("script"),d=false;tk.src='//use.typekit.net/'+config.kitId+'.js';tk.type="text/javascript";tk.async="true";tk.onload=tk.onreadystatechange=function(){var a=this.readyState;if(d||a&&a!="complete"&&a!="loaded")return;d=true;clearTimeout(t);try{Typekit.load(config)}catch(b){}};var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(tk,s)
})()
// force scroll to top on reload
document.addEventListener('DOMContentLoaded', function(){
window.setTimeout(function(){
window.scrollTo(0,0)
}, 50);
});
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45111913-1', 'adobe-webplatform.github.io');
ga('send', 'pageview');
</script>
</body>
</html>