diff options
| author | Bartek Szopka <bartek.szopka+github@gmail.com> | 2012-01-18 00:30:11 +0100 |
|---|---|---|
| committer | Bartek Szopka <bartek.szopka+github@gmail.com> | 2012-01-18 00:30:11 +0100 |
| commit | 5ea857e6c2c09783bbe91fa66c4caccd15557c32 (patch) | |
| tree | 51983dccacbdb45d3a50237a34c53c211358c386 | |
| parent | 5cc12cdca15de56e3a93c10d884cf9736dbacfc7 (diff) | |
| download | impress.js-5ea857e6c2c09783bbe91fa66c4caccd15557c32.tar.gz | |
impressive documentation added, but not in a way you'd expect probably ;)
| -rw-r--r-- | index.html | 153 |
1 files changed, 153 insertions, 0 deletions
@@ -1,4 +1,49 @@ <!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"> <head> <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" /> + <!-- + 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" /> </head> <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 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> </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"> <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q> </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"> <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> @@ -32,12 +123,26 @@ <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q> </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"> <span class="try">then you should try</span> <h1>impress.js<sup>*</sup></h1> <span class="footnote"><sup>*</sup> no rhyme intended</span> </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"> <p>It's a <strong>presentation tool</strong> <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> </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"> <p>and <b>tiny</b> ideas</p> </div> @@ -69,20 +181,61 @@ <p>one more thing...</p> </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"> <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> </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> </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"> <p>Use a spacebar or arrow keys to navigate</p> </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> </body> |