Gloubi script – un cadre clignotant

Aujourd’hui, nous allons nous attaquer à un script présenté chez notre gloubi rival qui pourra vous être très utile pour mettre en avant n’importe quel contenu sur, par exemple, la magnifique page d’accueil de votre tout aussi sublime site : le cadre clignotant.

Comme pour d’autres gloubi scripts déjà présentés, il est possible maintenant d’obtenir le même effet seulement avec du CSS. Dans cet article je présenterait la solution JavaScript actuelle (avec une légère correction) puis une solution utilisant uniquement CSS.

Solution JavaScript

Le code utilisé (visible ici) est très simple. Toutes les 500 millisecondes (avec setInterval) on appelle une fonction qui vérifie la couleur de bordure de notre élément cible (via son attribut style), et selon sa valeur, cette couleur est changé (par exemple, si la bordure est bleue, elle est changée en rouge, et inversement).

Léger correctif : le seul correctif à faire sur le script est la manière de cibler l’élément dont on doit faire clignoter la bordure. Pour cela, rien de très sorcier, un getElementById() suffit.

const myexample = document.getElementById('news');

function flashit(){
  if (myexample.style.borderColor=='lime') {
  	myexample.style.borderColor='orange';
  } else {
  	myexample.style.borderColor='lime';
  }
}
setInterval('flashit()', 500);

Solution CSS

Pour reproduire cet effet en CSS, une simple animation @keyframes avec une couleur différente à 50 % suffit.

@keyframes frameFlash {
  50% {
    border-color: orange;
  }
}

Le point un peu plus problématique est le suivant : avec les animations CSS, les différentes propriétés sont généralement changées de manière progressive, or ce que nous cherchons à obtenir c’est une transition nette…

Pour cela, au lieu d’utiliser un mot-clé comme linear ou encore ease-out pour définir la fonction de timing, il faut utiliser la fonction steps(). Cette fonction prend 2 paramètres :

  • le nombre d’étapes
  • un mot-clé indiquant comment les étapes sont organisées

Pour en savoir plus sur les options de step(), rendez-vous sur la page correspondante sur MDN.

La définition de notre animation devient donc :

animation: frameFlash 500ms steps(1,end) infinite alternate;

La version complète de cette animation est présentée sur mon site.


Vous voilà maintenant capables de créer vos propres cadres clignotants à l’aide de quelques lignes de CSS.

Laisser un commentaire