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