Animez vos présentations remark.js

Animez vos présentations remark.js

Vous utilisez remark.js pour faire des présentations, et vous voulez ajouter une animation au changement de slide ? C’est parti alors.

Remark.js ?

Remark.js est une librairie JavaScript a ajouter sur un page Web, conjointement à du Markdown pour en faire une jolie présentation.
Un peu comme avec PowerPoint, mais… en Markdown.

Je vous ai déjà parlé de remark.js, notamment parce que j’avais réalisé un petit générateur de présentations (en Node.js) qui inclue automatiquement votre document Markdown dans une page Web qui va faire office de présentation. Et si votre document n’est pas conçu spécialement pour être converti en présentation, markdown-to-slides, puisque c’est son nom, va l’adapter automatiquement.

Plus récemment, j’ai aussi travaillé sur un générateur de pages Web statiques, Vegetables, qui utilise remark.js pour proposer une version slideshow en plus des pages Web.

Tout ça pour dire, que remark.js, c’est très bien, et que j’ai eu envie d’ajouter un peu de transition entre les diapos.

Alors, comment faire ?

Avant de commencer, trois points à connaître avant de personnaliser les transitions :

  • Toutes les slides possèdent la classe remark-slide-container
  • La slide en cours possède la classe remark-visible
  • Enfin remark.js ajoute une classe remark-fading pendant une seconde à la slide qui vient d’être changée.

Sachant ça, ajouter une transition est simple.

D’abord, il faut remonter la slide qui vient d’être quittée avec z-index :

.remark-fading {
	z-index: 9;
}

Ensuite, pour animer la slide de gauche à droite, en la faisant disparaître progressivement en jouant sur son opacité, on positionne toutes les slides à gauche, et on définit la transition :

.remark-slide-container {
	transition: opacity 1s linear, right 1s ease-in-out;
	opacity: 0;
	right: 1000px;
}
.remark-visible {
	transition: opacity 1s linear, right 1s ease-in-out;
	opacity: 1;
	right: 0px;
}

C’est tout.

Enfin presque : cette animation est identique que l’on aille vers la fin ou vers le début de la présentation.

Changer le sens

Comme il n’existe aucune indication permettant de connaître le sens, une astuce est de positionner toutes les slides après la courante à droite, et les autres à gauche.

Et pour faire ceci, l’opérateur ~ permet de sélectionner tous les éléments comportant une classe après un ou plusieurs éléments.

Ici, toutes les slides après celle visible :

.remark-visible ~ .remark-slide-container {
	right: -1000px;
}

Cette fois c’est vraiment tout.

Le mot de la fin

C’était simple finalement.

L'illustration de cet article est une image sous licence CC BY-SA 3.0 par Harryzilber

Cet article vous a été utile ? Partage it !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.