forked from misterbrownlee/impress.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
substep.html
156 lines (124 loc) · 5.98 KB
/
substep.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<title>impress.js - substep fork - by tehfoo</title>
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="stylesheet" href="css/substep.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<!--
8 o
8 8
.oPYo. o o 8oPYo. .oPYo. o8P .oPYo. .oPYo. .oPYo.
Yb.. 8 8 8 8 Yb.. 8 8oooo8 8 8 Yb..
'Yb. 8 8 8 8 'Yb. 8 8. 8 8 'Yb.
`YooP' `YooP' `YooP' `YooP' 8 `Yooo' 8YooP' `YooP'
:.....::.....::.....::.....:::..::.....:8 ....::.....:
::::::::::::::::::::::::::::::::::::::::8 ::::::::::::
::::::::::::::::::::::::::::::::::::::::..::::::::::::
::::::::::::::::::: an impress.js fork, by tehfoo ::
::::::::::::::::::::::::::::::::::::::::::::::::::::::
Substeps are easy... you can use these comments to see how they are done.
NOTE: you will also have to add CSS for the '.substep' class to make anything happen
See the css/substep.css for more details.
If it's not entirely clear, you need the forked 'impress.js' script from this project's
js folder to make substeps work. Otherwise, everything else is exactly the same as
the upstream impress.js, so you can use that project's docs, examples, etc.
-->
<!--
This header isn't part of the impress steps. It stays put because it
has absolute positioning in the css
-->
<heading id="header">
<span>impress.js </span>
<a href="http://github.com/tehfoo/impress.js" target="_blank"> - substep fork - </a>
<span>by tehfoo</span>
</heading>
<!-- Anything handled by impress.js must be inside this #impress div -->
<div id="impress">
<!--
Here is a regular impress.js step. RTFM on impress.js to understand how this works,
but the TL;DR is the data-FOO properties are telling impress where to position each step.
Adding class="step" is what lets impress.js know this is a step in your presentation
-->
<div id="introduction" class="step" data-x="0" data-y="0">
<h1 class="line">impress.js - substep example</h1>
<p>This is an example of a presentation with substeps.</p>
<p>Use space bar or right arrow to go to the next step. </p>
<p>Keep pressing to reveal substeps!</p>
<h2>Ready?<h2>
</div>
<!--
This where the money gets made. By adding class="substep" to the list elements, they
become substeps for impress.js to navigate. They do not understand any of the data-FOO
properties. All that happens is impress.js adds 'future', 'present', 'active', and 'past'
to the substep elements, almost exactly the way impress.js handles steps.
The almost part is around the 'active' class. Substeps stay 'active' one you have been
over them. A normal 'step' is only active when it's 'present'.
-->
<div id="can-haz" class="step" data-x="1200" data-y="1500" data-scale="1.5" data-rotate="90">
<h1 class="line">Can Haz Substep?</h1>
<ul>
<li class="substep">Sure!</li>
<li class="substep">Just add the 'substep' class</li>
<li class="substep">and amaze your friends</li>
<li class="substep">with substep goodness!</li>
</ul>
</div>
<!--
Look, ma! Another regular step! This is here to illustrate that you can mix substeps into a
a regular flow and the navigation makes sense. Going backwark, the substeps will get played
back, and the 'active' class will be removed when they return to being 'future' substeps.
-->
<div id="or-not" class="step" data-x="250" data-y="3000" data-scale="2" data-rotate="180">
<h1 class="line">These are not substeps...</h1>
<ul class="boring-list">
<li>Quelle Horreur!</li>
<li>Using regular old bullets</li>
<li>makes for <span class="overload">information overload</span></li>
<li>so your audience is reading</li>
<li>instead of listening.</li>
</ul>
</div>
<!--
By now you get it. I'll just wait quietly while YOU tell ME how this step works.
Hint: all you have to do is add a CSS classname...
-->
<div id="try-back" class="step" data-x="-1200" data-y="1500" data-scale="1.5" data-rotate="270">
<h1 class="line">Did you notice?</h1>
<div id="works-on-divs-too">
<div class="substep">You can go backward still!</div>
<div class="substep">If you can't figure out how</div>
<div class="substep">look at the arrow keys</div>
<div class="substep">and think about it real hard...</div>
</div>
</div>
<!--
See how easy that was? Booya! Feel free to give me mad props for making
the world a better place to live. Or just say 'hi'! Or don't.
-->
<div id="outroduction" class="step" data-x="-1500" data-y="0">
<h1 class="line">That's all.<sup>*</sup></h1>
<p>Thanks for playing!</p>
<p class="note"><sup>*</sup> note that slides don't re-init.
If you go forward through the steps again, everything will
be active. <br>Reload on the next step to start over.</p>
<a href="http://github.com/tehfoo/impress.js" class="right" target="_blank">See the code on Github</a>
</div>
<!--
If you use this, and you like it, and you notice my pull request never makes it back into the
the upstream impress.js, maybe just give them a little nudge. I'd rather not maintain an
impress.js fork going forward.
-->
</div> <!-- end impress div -->
<!--
Again, RTFM on impress.js to know everything else... like what this little script
is doing. It's kinda important!
-->
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>