Planet-Libre

nIQnutn : Aller plus loin avec reveal.js

mercredi 11 janvier 2017 à 10:00

reveal.js est un outil très utile pour faire des présentations en HTML. Il propose en plus d'utiliser la syntaxe Markdown. Son utilisation est relativement simple et ne nécessite pas de logiciels spécifiques.

Il existe encore quelques options très intéressantes à connaître pour réaliser votre présentation.

Chargement différé

Si vous réalisez une présentation avec beaucoup de contenu multimédia, le chargement du diaporama pourrait être long. L'utilisation du lazy loading (ou chargement différé) permet de charger le contenu multimédia que pour les n diapos suivantes.

Cela permet d'être plus réactif lors du lancement de la présentation tout en évitant d'avoir des temps de chargement pendant.

Pour utiliser le chargement différé, il faut remplacer "src" par "data-src".

code

Le chargement différé peut être utilisé pour les images, les vidéos, les fichiers audio et les iframes.

Configuration

Il est possible de modifier le nombre de slides à charger:

code

Reveal.initialize({
	...
	viewDistance: 3,   // Number of slides away from the current that are visible
	...
})

https://github.com/hakimel/reveal.js#lazy-loading

Code

Il est possible de créer un bloc de code éditable:

code


	
		$(document).ready(function() {
		  $('pre code').each(function(i, block) {
		    hljs.highlightBlock(block);
		  });
		});

Il est possible de supprimer les lignes vides (en dessus et en dessous du bloc de code):

code


	


		$(document).ready(function() {
		  $('pre code').each(function(i, block) {
		    hljs.highlightBlock(block);
		  });
		});

https://github.com/hakimel/reveal.js#code-syntax-highlighting

Animation avancée

Il est possible de définir l'ordre d'apparition d'un élément avec "data-fragment-index":

code


	Et pour finir, le troisième
	En premier
	Ensuite le deuxième

https://github.com/hakimel/reveal.js#fragments

Transition avancée

On peut définir la vitesse de transition entre les diaporama.

Pour définir la vitesse de transition pour l'ensemble du diaporama:

code

Reveal.initialize({
	...
	transitionSpeed: 'default', // default, fast, slow
	...
})

Pour définir la vitesse de transition pour une seule diapo:

code


	Choisir la vitesse de transition: default, fast or slow!

On peut définir un type de transition pour l'apparition et un autre pour la disparition de la diapo.
Il faut suffixer le type de transition avec "-in" et "-out":

code


	zoom puis slide

https://github.com/hakimel/reveal.js#slide-transitions

Étirer un élément

Il est possible d'étirer un élément (image, vidéo, ...) pour qu'il utilise le maximum d'espace sur la diapo.

code

https://github.com/hakimel/reveal.js#stretching-elements

Note

Il existe une méthode alternative pour insérer des notes dans la présentation.

code


	Appuyer sur la touche S pour afficher les notes.

Titre sur les diapos verticales

On peut insérer un titre sur l'ensemble des diapos verticales.
Il faut ajouter le titre juste avant de créer les diapos X et Y.

code

Titre visible
	Diapo X
	Diapo Y

Conclusion

Je vous ai présenté l'essentiel des fonctionnalités qui me semblent intéressantes (pour mon usage personnel). La documentation officielle contient encore quelques éléments, n'hésitez pas à la consulter pour en apprendre plus.

Pour ceux qui sont à l'aise avec HTML, CSS et javascript il y aura la possibilité d'être beaucoup plus créatif.
Je pense notamment à la création de nouveaux thèmes.

N'hésitez pas à partager vos trucs et astuces sur reveal.js.

Ressources

2016 nIQnutn CC-BY

Original post of nIQnutn.Votez pour ce billet sur Planet Libre.