Added the substeps functionnality that allows to create changes in a …

…single step (see example to see it working)

README

@@ -0,0 +1,2 @@
+This project contains the source files for the impress.js tutorial available here:  
+http://www.cubewebsites.com/blog/guides/how-to-use-impress-js/

css/impress-demo.css

@@ -377,6 +377,39 @@ a:focus {
     transition-delay:         0.5s;
 }
 
+/*
+    This step introduces substeps.
+    At first, it only has one line of text, but after 1 action, it adds one line and changes text color to red, and
+    after the second action, adds another line another line and changes the color to green.
+    This rule hides the added texts
+*/
+#substeps .substep1,
+#substeps .substep2{
+    display: none;
+}
+
+/*
+    Those rules set the style for when the sub steps will be shown
+*/
+#substeps{
+    height:400px;
+    -webkit-transition: color 1s;
+    -moz-transition: color 1s;
+    -ms-transition: color 1s;
+    -o-transition: color 1s;
+    transition: color 1s;
+}
+
+/*
+    This rule shows the texts and changes the color when the classes are added
+*/
+.substeps_container_1{color: red;}
+.substeps_container_2{color: green;}
+#substeps.substeps_container_1 .substep1,
+#substeps.substeps_container_2 .substep2{
+    display:block;
+}
+
 /*
     The 'imagination' step is again some boring font-sizing.
 */

index.html

@@ -227,7 +227,7 @@ <h1>impress.js<sup>*</sup></h1>
 
     <!--
         
-        And now it gets really exiting! We move into third dimension!
+        And now it gets really exciting! 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
@@ -261,6 +261,32 @@ <h1>impress.js<sup>*</sup></h1>
     <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>
+
+    <!--
+    
+        This step introduces substeps.
+    
+        Substeps allow a single step to be called more than once in a row, adding a class 
+        everytime, which allows to make parts of the page appear or change when the visitor asks to continue 
+        the navigation.
+    
+        It is created using the data-multistep parametter. The value should be a space-separated-list 
+        of classes.
+        
+        When the step is shown, none of the classes are used. Then, it adds the class "multiStepping" 
+        and the first of the classes contained in data-multistep. Then the second is added and the first 
+        removed. When the last is reached, both classes (the last one and "multiStepping") are removed 
+        and the next step is shown.
+    
+    -->
+    <div id="substeps" data-multistep="substeps_container_1 substeps_container_2" class="step" data-x="4500" data-y="-3000" data-rotate="0" data-scale="6">
+        <p>and by creating <b>substeps</b></p>
+        <ul>
+            <li class="substep1 substep2">that may come</li>
+            <li class="substep2"><b>one by one</b></li>
+        </ul>
+
+    </div>
 
     <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
         <p>the only <b>limit</b> is your <b class="imagination">imagination</b></p>