Animations individuelles

Ces fonctionnalités correspondent à la fonctionnalité animation personnalisée de LibreOffice ou du Volet animation de PowerPoint

Imaginons que vous ayez deux éléments dans la même slide, mais vous ne voulez pas que le deuxième apparaisse tout de suite, vous voulez qu'il apparaisse quand vous cliquez. Pour cela, on va utiliser l'attribut cjs-animate.

Effet prédéfini

ColorJS est fourni avec des effets prédéfinis pour l'animation personnalisée. Par exemple le code suivant dans une slide :

Contenu de ma slide
<span class="fade" cjs-animate="1">Contenu caché au dépert</span>

Cela produira une apparition en fondu du span lors du premier clic. En effet la classe fade est fournie avec ColorJS et définit un effet de fondu. L'attribut cjs-animate="1" définit que l'élément va apparaitre au premier clic. Si vous changez sa valeur pour 2, par exemple, il apparaitra au deuxième clic.

Liste des effets prédéfinis

Tag

Effet produit

fade

Apparition de l'élément en fondu

simple

Apparition de l'élément en fondu avec un effet de translation depuis la droite vers la gauche

simpleleft

Apparition de l'élément en fondu avec un effet de translation depuis la gauche vers la droite

Apparitions personnalisées

Il est également possible de créer vos propres effets d'apparition. Pour cela il est nécessaire de comprendre le fonctionnement de ColorJS:

  • Lorsqu'un √©l√©ment n'est pas encore affich√©, il n'a pas de classe particuli√®re, √† part celles d√©finies par l'utilisateur.

  • Lorsque c'est au tour de l'√©l√©ment d'appara√ģtre, le script lui ajoute la classe current. Ainsi les effets pr√©d√©finis ne sont que des r√®gles CSS avec et sans current

Créer votre effet

Pour créer un effet donc, il faut d'abord définir les règles CSS d'un élément lorsqu'il n'est pas encore visible. Nous allons ici créer un effet de fondu et de rotation. Il aura la classe rotate

On définit les règles lorsque l'élément est caché:

.rotate {
opacity: 0;
transform: rotate(-200deg);
transition: all 0.5s ease-in-out;
}

Puis lorsqu'il est affiché, avec la classe current:

.rotate.current {
opacity: 1;
transform: rotate(0);
}

Maintenant on ajoute la classe correspondante à notre élément HTML, sans oublier l'attribut cjs-animate:

<div class="rotate" cjs-animate="1">Contenu caché au départ</div>

Le résultat final:

‚Äč