Cette fois-ci encore, j’ai décidé de m’attaquer à un autre gloubi script d’effet sur texte, le texte changeant de couleur.

Une fois de plus, dû à l’évolution des technologies, plus besoin de JavaScript pour obtenir un résultat identique (ou en tout cas très proche).

Fonctionnement du script

On indique au script les couleurs (du texte et du fond) entre lesquelles faire une transition. Ces couleurs sont définies chacune par trois variables (ce qui nous fait 12 variables en tout) contenant une valeur décimale (entre 0 et 255) qui sera ensuite convertie en hexadécimal sur deux digits (entre 00 et FF) pour indiquer la couleur sous la notation #RRGGBB.

Les valeurs des différentes composantes sont progressivement incrémentées puis décrémentées entre les valeurs bornes.

Recréation en CSS

Pour créer une animation à l’aide de CSS, il faut lui définir différents points avec les styles à appliquer pour chacun de ces points. La déclaration de ces points se fait comme ci-dessous :

@keyframes titleAnimation {
  /* ... */
}

Dans notre cas, on n’a besoin de définir que 2 points : un point de départ (from) et un point d’arrivée (to). Cela donne :

@keyframes titleAnimation {
  from {
    background-color: rgb(204, 255, 102);
    color: rgb(255, 0, 0);
  }
  to {
    background-color: rgb(102, 255, 255);
    color: rgb(0, 0, 255);
  }
}

Maintenant que notre animation est créée, il faut pouvoir l’appliquer aux éléments que l’on souhaite animer. Cela passe par l’utilisation de la propriété animation ou de ses sous-propriétés. Ici, ce que l’on souhaite, c’est jouer l’animation sur X secondes et de la répéter indéfiniment de façon alternée. Dans notre cas, cela donne :

animation: titleAnimation 10s infinite alternate;

Pour en savoir plus sur les animations CSS, que je n’ai fait ici que rapidement survoler, je vous conseille la partie parlant des @keyframes du cours « Créer des animations CSS modernes » d’OpenClassrooms, ainsi que la documentation MDN.

En prenant tous les p’tits bouts trucs présentés ici et que vous les assemblez ensemble, vous obtenez ce résultat.

Je vous dis à bientôt (j’espère) pour d’autres explications et refontes de gloubi scripts.