Créer un effet de glitch / bug informatique au survol

Pour vos présentations ou pour votre logo, que ce soit en survol ou en permanence, ajoutez un effet de glitch / bug moderne ! Découvrons ensemble comment le mettre en place.

 

1ère étape

Commençons par le code HTML.

<i class="fab fa-instagram fa-4x"></i>

Et dans la balise head :

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css” />

Nous allons utiliser font-awesome pour faire en sorte d’afficher une icône sans se prendre la tête avec une image à chercher.

 

2ème étape

Stylisons l'icône et le survol.

.fab {
  color: white;
}

.fab:hover {
  animation: icon-glitch 1s infinite;
}

Au survol de l’icône, nous appelons une animation “icon-glitch”. Il suffit de l’appeler pour appliquer cet effet sur tous les éléments.

 

3ème étape

Créons l'animation icon-glitch pour terminer le projet.

@keyframes icon-glitch {
  0% {
    text-shadow: 5px 4px rgb(244, 67, 54), -5px -6px rgb(33, 150, 243);
  }
  25% {
    text-shadow: -5px -6px rgb(244, 67, 54), 5px 4px rgb(33, 150, 243);
  }
  50% {
    text-shadow: 5px 4px rgb(244, 67, 54), -8px 4px rgb(33, 150, 243);
  }
  75% {
    text-shadow: -8px -4px rgb(244, 67, 54), -5px -4px rgb(33, 150, 243);
  }
  100% {
    text-shadow: -5px 0 rgb(244, 67, 54), 5px -4px rgb(33, 150, 243);
  }
}