Ajouter

Lorem ipsum

Lorem ipsum

Easter egg

12 vues

3 min

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.

1. Ajoutez le script dans Footer code

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  de votre page :
//

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...

bon à savoir

Le code Konami est un easter egg destiné aux visiteurs qui connaissent la référence, majoritairement des développeurs et des gamers. Il crée un moment de surprise et de complicité avec votre audience tech. Sur un site d'agence digitale ou un portfolio développeur, c'est un signal fort de personnalité et d'attention aux détails.

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

Ces tutoriels pourraient vous intéresser

tutoriels similaires

SEO / GEO

5 min lecture

5 vues

Comment faire une redirection sur Webflow ? (2026) ?

Mis à jour le 19.12.2025 par Sandro DA SILVA

SEO / GEO

5 min lecture

5 vues

Ajouter des données structurées à votre site Webflow ?

Mis à jour le 21.08.2025 par Sandro DA SILVA

No-code

5 min lecture

5 vues

Comment obfusquer un lien dans Webflow ?

Mis à jour le 23.04.2025 par Sandro DA SILVA

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

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

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez :heart: notre collaboration...