docs updated with recent changes

1 files changed, 37 insertions, 1 deletions

diff --git a/index.html b/index.html
index 929d59d..467813c 100644
--- a/index.html
+++ b/index.html
@@ -131,6 +131,19 @@
     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.
     
+    You probably won't need it now, but there are some configuration options that can be set on this element.
+    
+    To change the duration of the transition between slides use `data-transition-duration="2000"` giving it
+    a number of ms. It defaults to 1000 (1s).
+    
+    You can also control the perspective with `data-perspective="500"` giving it a number of pixels.
+    It defaults to 1000. You can set it to 0 if you don't want any 3D effects.
+    If you are willing to change this value make sure you understand how CSS perspective works:
+    https://developer.mozilla.org/en/CSS/perspective
+    
+    But as I said, you won't need it for now, so don't worry - there are some simple but interesing things
+    right around the corner of this tag ;)
+    
 -->
 <div id="impress">
 
@@ -225,6 +238,26 @@
         <p>and <b>tiny</b> ideas</p>
     </div>
 
+    <!--
+        
+        This step here doesn't introduce anything new when it comes to data attributes, but you
+        should notice in the demo that some words of this text are being animated.
+        It's a very basic CSS transition that is applied to the elements when this step element is
+        reached.
+        
+        At the very beginning of the presentation all step elements are given the class of `future`.
+        It means that they haven't been visited yet.
+        
+        When the presentation moves to given step `future` is changed to `present` class name.
+        That's how animation on this step works - text moves when the step has `present` class.
+        
+        Finally when the step is left the `present` class is removed from the element and `past`
+        class is added.
+        
+        So basically every step element has one of three classes: `future`, `present` and `past`.
+        Only one current step has the `present` class.
+        
+    -->
     <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
         <p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p>
     </div>
@@ -270,6 +303,9 @@
             are exactly the same;
         * `data-scale` -- defines the scale of step element; default value is 1
         
+        These values are used by impress.js in CSS transformation functions, so for more information consult
+        CSS transfrom docs: https://developer.mozilla.org/en/CSS/transform
+        
     -->
     <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
     </div>
@@ -329,7 +365,7 @@ if ("ontouchstart" in document.documentElement) {
 
 <!--
     
-    The `impress()` function also gives you access to API to control the presentation.
+    The `impress()` function also gives you access to the API that controls the presentation.
     
     Just store the result of the call: