From c8410de67ca2c1e1b04dc52772ab26bbb88be004 Mon Sep 17 00:00:00 2001
From: jcougnoux <jcougnoux+gitit@evolix.fr>
Date: Wed, 12 Apr 2017 18:45:16 +0200
Subject: [PATCH] Slides verticaux, image en background sur un slide,
 fragmentation...

---
 HowtoReveal.js.md | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/HowtoReveal.js.md b/HowtoReveal.js.md
index 39aeda87..ca8dc16a 100644
--- a/HowtoReveal.js.md
+++ b/HowtoReveal.js.md
@@ -1,7 +1,50 @@
 # Howto reveal.js
 
+Pour faire des slides verticaux, il suffit d'englober plusieurs sections dans une même section :
+
+~~~{.html}
+<section>
+    <section>
+	<h2>Vertical Slides</h2>
+	<p>
+            Slides can be nested inside of each other.
+        </p>
+    </section>
+    <section>
+        <h2>Basement Level 1</h2>
+	<p>
+            Nested slides are useful for adding additional detail underneath a high level horizontal slide.
+        </p>
+    </section>
+</section>
+~~~
+
+Pour intégrer une image en background sur un slide en particulier, il faut ajouter l'attribut data-background à la section : 
+
+~~~{.html}
+<section data-background="url-de-l-image.png">
+    <h2>A slide with a image</h2>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+</section>
+~~~
+
+On peut afficher du texte ou des images de façon fragmentée grâce à la class "fragment" :
+
+~~~{.html}
+<section>
+    <h2>A slide with a image</h2>
+    <p class="fragment">Lorem ipsum dolor sit amet...</p>
+    <p class="fragment"> ...consectetur adipiscing elit...</p> 
+    <p class="fragment">...sed do eiusmod tempor incididunt ut...</p>
+    </p>...labore et dolore magna aliqua.</p>
+    <img class="fragment" data-src="url-de-l-image.png">
+</section>
+~~~
+
 Transformer une présentation en .pdf :
 
 ~~~
 $ ~/GIT/decktape$ ./phantomjs decktape.js file:///tmp/foo.html foo.pdf
-~~~
\ No newline at end of file
+~~~