One of the most obvious choices would be to use something like the following Contra.gif file, which is a nod to one of Konami's original and most famous games.
Define the styles:
Create the default style, the style that will be added once the code has been activated and the animation sequence.
<head> <style> #Konami {position:absolute; top:0px; width:99%; height:100px; background-image:url(konami.gif); opacity:0;} .contra {background-image:url(konami.gif); background-position:0px; background-repeat: no-repeat; animation: runner 8s 1 linear;} @keyframes runner {0% {background-position: 0px; opacity:0} 50% {background-position: 50%; opacity:1} 100% {background-position: 100%; opacity:0}} </style>
Next, define the JavaScript:
Tell the page what to do once someone types the Konami code
<script> // Konami Code if (window.addEventListener) {var state = 0, Konami=[38,38,40,40,37,39,37,39,66,65]; window.addEventListener("keydown", function(e) {if (e.keyCode==Konami[state]) state++; else state=0; if (state==10) document.getElementById("Konami").className = "contra";}, true);} </script> </head>
Alternate code:
If you want the script to do more than one thing, you will need to define it in a separate function instead, such as the script below that runs the animation and then reloads the page, after 5 seconds.
Without this step, the visitor can only run the code once on your webpage and the next time they try, nothing will happen, because the variables have already been changed to their new state. Of course, you could always reset them, but reloading the page is simpler.
<script> // Konami Code function KonamiReload() {document.getElementById("Konami").className = "contra"; setTimeout(function(){location.reload();},5000);} if (window.addEventListener) {var state = 0, Konami=[38,38,40,40,37,39,37,39,66,65]; window.addEventListener("keydown", function(e) {if (e.keyCode==Konami[state]) state++; else state=0; if (state==10) KonamiReload();}, true);} </script>
Place the animation on the page:
Keep in mind that if you have this div overlap other css elements on your page, it may disable their functionality. One way around this is to set the z-index of the original Konami style below that of the other elements with the following additional CSS element, added to the Konami style at the top of the page: z-index:-1;
<body> <div id="Konami"></div> </body>
(シヴェン)