evolix/wiki
22
0
Fork 0
Code Releases Activity

Slides verticaux, image en background sur un slide, fragmentation...

Browse source
This commit is contained in:
jcougnoux 2017-04-12 18:45:16 +02:00
parent 1be3a6fd5f
commit c8410de67c
1 changed files with 44 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
HowtoReveal.js.md
View file

@ -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
~~~
~~~