impressive documentation added, but not in a way you'd expect probably ;)
This commit is contained in:
Bartek Szopka
153
index.html
153
index.html
@@ -1,4 +1,49 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Welcome to the light side of the source, young padawan.
|
||||||
|
|
||||||
|
One step closer to learn something interesting you are...
|
||||||
|
|
||||||
|
____
|
||||||
|
_.' : `._
|
||||||
|
.-.'`. ; .'`.-.
|
||||||
|
__ / : ___\ ; /___ ; \ __
|
||||||
|
,'_ ""--.:__;".-.";: :".-.":__;.--"" _`,
|
||||||
|
:' `.t""--.. '<@.`;_ ',@>` ..--""j.' `;
|
||||||
|
`:-.._J '-.-'L__ `-- ' L_..-;'
|
||||||
|
"-.__ ; .-" "-. : __.-"
|
||||||
|
L ' /.------.\ ' J
|
||||||
|
"-. "--" .-"
|
||||||
|
__.l"-:_JL_;-";.__
|
||||||
|
.-j/'.; ;"""" / .'\"-.
|
||||||
|
.' /:`. "-.: .-" .'; `.
|
||||||
|
.-" / ; "-. "-..-" .-" : "-.
|
||||||
|
.+"-. : : "-.__.-" ;-._ \
|
||||||
|
; \ `.; ; : : "+. ;
|
||||||
|
: ; ; ; : ; : \:
|
||||||
|
; : ; : ;: ; :
|
||||||
|
: \ ; : ; : ; / ::
|
||||||
|
; ; : ; : ; : ;:
|
||||||
|
: : ; : ; : : ; : ;
|
||||||
|
;\ : ; : ; ; ; ;
|
||||||
|
: `."-; : ; : ; / ;
|
||||||
|
; -: ; : ; : .-" :
|
||||||
|
:\ \ : ; : \.-" :
|
||||||
|
;`. \ ; : ;.'_..-- / ;
|
||||||
|
: "-. "-: ; :/." .' :
|
||||||
|
\ \ : ;/ __ :
|
||||||
|
\ .-`.\ /t-"" ":-+. :
|
||||||
|
`. .-" `l __/ /`. : ; ; \ ;
|
||||||
|
\ .-" .-"-.-" .' .'j \ / ;/
|
||||||
|
\ / .-" /. .'.' ;_:' ;
|
||||||
|
:-""-.`./-.' / `.___.'
|
||||||
|
\ `t ._ /
|
||||||
|
"-.t-._:'
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
@@ -9,10 +54,35 @@
|
|||||||
|
|
||||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Impress.js doesn't depend on any external stylesheet. Script adds all styles it needs for
|
||||||
|
presentation to work.
|
||||||
|
|
||||||
|
This style below contains styles only for demo presentation. Browse it to see how impress.js
|
||||||
|
classes are used to style presentation steps, or how to apply fallback styles, but I don't want
|
||||||
|
you to use them directly in your presentation.
|
||||||
|
|
||||||
|
Be creative, build your own. We don't really want all impress.js presentations to look the same,
|
||||||
|
don't we?
|
||||||
|
|
||||||
|
When creating your own presentation get rid of this file. Start from scratch, it's fun!
|
||||||
|
-->
|
||||||
<link href="css/impress-demo.css" rel="stylesheet" />
|
<link href="css/impress-demo.css" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
That's the wrapper for your presentation steps. In this element all the impress.js magic happens.
|
||||||
|
It doesn't have to be a `<div>`. Only `id` is important here as that's how the script find it.
|
||||||
|
|
||||||
|
It's worth to notice the `impress-not-supported` class. This class means, that browser doesn't
|
||||||
|
support features required by impress.js, so you can apply some fallback styles in your CSS.
|
||||||
|
It's not necessary to add it manually on this element. If the script detects that browser is not
|
||||||
|
good enough it will add this class, but keeping it in HTML means that users without JavaScript
|
||||||
|
will also get fallback styles.
|
||||||
|
|
||||||
|
-->
|
||||||
<div id="impress" class="impress-not-supported">
|
<div id="impress" class="impress-not-supported">
|
||||||
|
|
||||||
<div class="fallback-message">
|
<div class="fallback-message">
|
||||||
@@ -20,10 +90,31 @@
|
|||||||
<p>For the best experience please use the latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>
|
<p>For the best experience please use the latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Here is where interesting thing start to happen.
|
||||||
|
|
||||||
|
Each step of the presentation should be an element inside the `#impress` with a class name
|
||||||
|
of `step`. These step elements are positioned, rotated and scaled by impress.js, and
|
||||||
|
the 'camera' shows them on each step of the presentation.
|
||||||
|
|
||||||
|
Positioning information is passed through data attributes.
|
||||||
|
|
||||||
|
In the example below we only specify x and y position of the step element with `data-x="-1000"`
|
||||||
|
and `data-y="-1500` attributes. This means that **the center** of the element (yes, the center)
|
||||||
|
will be positioned in point x = -1000px and y = -1500px of the presentation 'canvas'.
|
||||||
|
|
||||||
|
It will not be rotated or scaled.
|
||||||
|
-->
|
||||||
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
|
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
|
||||||
<q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
|
<q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
The `id` attribute of the step element is used to identify it in the URL, but it's optional.
|
||||||
|
If it is not defined, it will get a default value of `step-N` where N is a number of slide.
|
||||||
|
|
||||||
|
So in the example below it'll be `step-2`.
|
||||||
|
-->
|
||||||
<div class="step slide" data-x="0" data-y="-1500">
|
<div class="step slide" data-x="0" data-y="-1500">
|
||||||
<q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q>
|
<q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q>
|
||||||
</div>
|
</div>
|
||||||
@@ -32,12 +123,26 @@
|
|||||||
<q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
|
<q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
This is an example of step element being scaled.
|
||||||
|
|
||||||
|
Again, we use a `data-` attribute, this time it's `data-scale="4"`, so it means that this
|
||||||
|
element will be 4 times larger than the others.
|
||||||
|
From presentation and transitions point of view it means, that it will have to be scaled
|
||||||
|
down (4 times) to make it back to it's correct size.
|
||||||
|
-->
|
||||||
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
|
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
|
||||||
<span class="try">then you should try</span>
|
<span class="try">then you should try</span>
|
||||||
<h1>impress.js<sup>*</sup></h1>
|
<h1>impress.js<sup>*</sup></h1>
|
||||||
<span class="footnote"><sup>*</sup> no rhyme intended</span>
|
<span class="footnote"><sup>*</sup> no rhyme intended</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
This element introduces rotation.
|
||||||
|
|
||||||
|
Notation shouldn't be a surprise. We use `data-rotate="90"` attribute, meaning that this
|
||||||
|
element should be rotated by 90 degrees clockwise.
|
||||||
|
-->
|
||||||
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
|
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
|
||||||
<p>It's a <strong>presentation tool</strong> <br/>
|
<p>It's a <strong>presentation tool</strong> <br/>
|
||||||
inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
|
inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
|
||||||
@@ -48,6 +153,13 @@
|
|||||||
<p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
|
<p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
And now it gets really exiting! We move into third dimension!
|
||||||
|
|
||||||
|
Along with `data-x` and `data-y`, you can define the position on third (Z) axis, with
|
||||||
|
`data-z`. In the example below we use `data-z="-3000"` meaning that element should be
|
||||||
|
positioned far away from us (by 3000px).
|
||||||
|
-->
|
||||||
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
|
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
|
||||||
<p>and <b>tiny</b> ideas</p>
|
<p>and <b>tiny</b> ideas</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -69,20 +181,61 @@
|
|||||||
<p>one more thing...</p>
|
<p>one more thing...</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
And the last one shows full power and flexibility of impress.js.
|
||||||
|
|
||||||
|
You can not only position element in 3D, but also rotate it around any axis.
|
||||||
|
So this one here will get rotated by -40 degrees (40 degrees anticlockwise) around X axis and
|
||||||
|
10 degrees (clockwise) around Y axis.
|
||||||
|
|
||||||
|
You can of course rotate it around Z axis with `data-rotate-z` - it has exactly the same effect
|
||||||
|
as `data-rotate` (these two are basically aliases).
|
||||||
|
-->
|
||||||
<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
|
<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
|
||||||
<p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
|
<p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
|
||||||
<span class="footnote">* beat that, prezi ;)</span>
|
<span class="footnote">* beat that, prezi ;)</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
So to make a summary of all the possible attributes used to position presentation steps, we have:
|
||||||
|
|
||||||
|
* `data-x`, `data-y`, `data-z` -- they define the position of **the center** of step element on
|
||||||
|
the canvas in pixels; their default value is 0;
|
||||||
|
* `data-rotate-x`, `data-rotate-y`, 'data-rotate-z`, `data-rotate` -- they define the rotation of
|
||||||
|
the element around given axis in degrees; their default value is 0; `data-rotate` and `data-rotate-z`
|
||||||
|
are exactly the same;
|
||||||
|
* `data-scale` -- defines the scale of step element; default value is 1
|
||||||
|
-->
|
||||||
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
|
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Hint is not related to impress.js in any way.
|
||||||
|
|
||||||
|
But it can show you how to use impress.js features in creative way.
|
||||||
|
|
||||||
|
When the presentation step is shown (selected) it's element get's the class of "active" and `#impress` root
|
||||||
|
element get's the class based on active step id `step-ID` (where ID is the step id)... It probably is not
|
||||||
|
so clear because of all these IDs in here, so for example when the first step (the one with id of `bored`)
|
||||||
|
is active, `#impress` element get a class of `step-bored`.
|
||||||
|
|
||||||
|
This class is used by this hint below. Check CSS file to see how it's shown with delayed CSS animation.
|
||||||
|
-->
|
||||||
<div class="hint">
|
<div class="hint">
|
||||||
<p>Use a spacebar or arrow keys to navigate</p>
|
<p>Use a spacebar or arrow keys to navigate</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Last, but not least.
|
||||||
|
|
||||||
|
To make all described above really work, you need to include impress.js in the page.
|
||||||
|
And you should do it in the end of your document. Not only because it's a good practice, but also
|
||||||
|
because I was lazy, haven't wrapped the code in any kind of "DOM ready" event, so it will not work
|
||||||
|
if included too early in the source ;)
|
||||||
|
-->
|
||||||
<script src="js/impress.js"></script>
|
<script src="js/impress.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user