Aller au contenu

Easter egg3 min lecture

Comment intégrer le code Konami dans Webflow ?

Apprenez à intégrer le légendaire code Konami dans votre site Webflow pour déclencher un easter egg secret.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment intégrer le légendaire code Konami dans votre site Webflow pour déclencher un easter egg secret.

Exemple

Tapez la séquence sur votre clavier

↑ ↑ ↓ ↓ ← → ← → B A

0 / 10 touches

SéquenceTouchesRésultat
Code Konami↑ ↑ ↓ ↓ ← → ← → B AEaster egg personnalisé
Détectionkeydown eventSéquence mémorisée progressivement
ResetMauvaise toucheRecommence depuis le début

Comprendre le code Konami

Le code Konami (↑↑↓↓←→←→BA) est un cheat code inventé par Kazuhisa Hashimoto en 1986 pour le jeu Gradius sur NES. Il est devenu une référence culturelle du gaming et est utilisé par de nombreux sites comme easter egg discret. Sur Webflow, il est particulièrement apprécié par les visiteurs développeurs.

Le script est autonome, aucun élément Webflow n'est nécessaire. Il crée lui-même le toast et les animations.

(function() {
  var KONAMI = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown',
    'ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
  var idx = 0;

  document.addEventListener('keydown', function(e) {
    if (e.key === KONAMI[idx]) {
      idx++;
      if (idx === KONAMI.length) {
        idx = 0;
        triggerEasterEgg();
      }
    } else {
      idx = e.key === KONAMI[0] ? 1 : 0;
    }
  });

  function triggerEasterEgg() {
    // Confettis si canvas-confetti est chargé
    if (typeof confetti === 'function') {
      confetti({ particleCount: 200, spread: 90, origin: { y: 0.5 } });
    }
    // Toast message
    var toast = document.createElement('div');
    toast.textContent = '🎉 Code Konami activé ! +30 vies';
    toast.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);' +
      'background:#111;color:#fff;padding:20px 32px;border-radius:16px;font-size:18px;' +
      'font-weight:500;z-index:99999;animation:konamiFade 3s forwards;';
    var style = document.createElement('style');
    style.textContent = '@keyframes konamiFade{0%{opacity:0;transform:translate(-50%,-60%)}' +
      '15%{opacity:1;transform:translate(-50%,-50%)}85%{opacity:1}100%{opacity:0}}';
    document.head.appendChild(style);
    document.body.appendChild(toast);
    setTimeout(function() { toast.remove(); }, 3000);
  }
})();

2. Combinez avec canvas-confetti

Pour ajouter des confettis quand le code est activé, chargez canvas-confetti dans le head et le script les déclenchera automatiquement :

// Dans le <head> de votre page :
// <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1/dist/confetti.browser.min.js"></script>

3. Personnalisez l'easter egg

Remplacez le contenu de la fonction triggerEasterEgg() par n'importe quelle action : redirection vers une page secrète, changement du thème, affichage d'un GIF, activation d'un mode spécial...

Conclusion

Le code Konami est l'easter egg le plus emblématique du web. Tapez ↑↑↓↓←→←→BA pour le tester sur cette page. Cas d'usage :

  • Portfolios de développeurs et agences créatives
  • Sites gaming ou culture pop
  • Pages de recrutement tech

Publié le 20 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!