75 lines
2.3 KiB
Markdown
75 lines
2.3 KiB
Markdown
# 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 image/gif 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>
|
|
~~~
|
|
|
|
Idem pour un background color :
|
|
|
|
~~~{.html}
|
|
<section data-background="#87CBE7">
|
|
<h2>A slide with a different background-color</h2>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
</section>
|
|
~~~
|
|
|
|
Pour intégrer une video en background sur un slide en particulier, l'attribut a ajouter est data-background-video :
|
|
|
|
~~~{.html}
|
|
<section data-background="url-de-la-video.webm">
|
|
<h2>A slide with a video</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/$ git clone https://github.com/astefanutti/decktape.git
|
|
$ ~/GIT/decktape$ curl -L https://github.com/astefanutti/decktape/releases/download/v1.0.0/phantomjs-linux-x86-64 -o phantomjs; chmod +x phantomjs
|
|
$ ~/GIT/decktape$ ./phantomjs decktape.js file:///tmp/foo.html foo.pdf
|
|
~~~
|