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équence | Touches | Résultat |
|---|---|---|
| Code Konami | ↑ ↑ ↓ ↓ ← → ← → B A | Easter egg personnalisé |
| Détection | keydown event | Séquence mémorisée progressivement |
| Reset | Mauvaise touche | Recommence 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...
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
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
