Transitions

Vous pouvez ajouter des transitions pour passer d'une slide à l'autre.

  • ColorJS est fourni avec des transitions d√©j√† d√©finies

  • Vous pouvez cr√©er vos propres transitions

Utiliser les transitions fournies

Pour ajouter des transitions, il faut modifier les classes de vos slides.

On modifie toujours la transition de la slide qui arrive, pas de la slide qui part. Par exemple, si je veux un fondu pour passer de la slide 1 à 2, je mettrai la classe fade sur la slide 2. Exemple, en modifiant notre code:

<div id="cjs-slider">
<div class="cjs-slide" style="background-color: #f00">
Ma première slide
</div>
<div class="cjs-slide fade" style="background-color: #8e44ad">
Ma deuxième slide
</div>
</div>

On obtient un joli fondu entre les deux slides.

Liste des transitions disponibles

Rappel: Si aucune transition n'est spécifiée, le changement d'une slide à l'autre se fera par un simple "cut".

Transitions de premier niveau

Les transitions de premier niveaux sont les effets de transition par défaut qui s'appliquent directement sur une slide. Par exemple:

<div class="cjs-slide fade" style="background-color: #8e44ad">
Ma deuxième slide
</div>

On ajoute la classe à la suite de cjs-slide.

‚Äč

Liste des transitions

Pour 2 slides A et B

Tag

Effet obtenu

fade

Fondu de A vers B

bottom

B pousse légèrement A du bas vers le haut

right

B pousse légèrement A de la droite vers la gauche

top

B pousse légèrement A du haut vers le bas

left

B pousse légèrement A de la gauche vers la droite

Exemple

<div class="cjs-slide" style="background-color: #f00">
Ma première slide
</div>
<div class="cjs-slide bottom" style="background-color: #8e44ad">
Ma deuxième slide
</div>

Ce code produira un effet de poussée de la deuxième slide qui va légèrement recouvrir la première.

Transitions de second niveaux

Ces effets s'ajoutent à un effet déjà existant. Utilisées seules, ces classes n'ont aucune action.

Liste des effets

Pour 2 slides A et B

Tag

Effet obtenu

Compatible avec

cover

B recouvre totalement A

bottom, right, top, left

push

B pousse totalement A

bottom, right, top, left

Ne pas utiliser ces effets avec fade.

Exemple

<div class="cjs-slide" style="background-color: #f00">
Ma première slide
</div>
<div class="cjs-slide bottom cover" style="background-color: #8e44ad">
Ma deuxième slide
</div>

Ce code produira un effet de poussée de la deuxième slide qui va totalement recouvrir la première.

Démonstration de tous les effets de transition fournis