Cómo añadir un Huevo de Pascua en tu Web con jQuery

Cómo añadir un Huevo de Pascua en tu Web con jQuery

Seguro que habéis visto más de una Web que tras una combinación de teclas muestra alguna imagen o hace algún efecto especial. Esto tanto puede ser una técnica de marketing viral por parte de los dueños de la página como una broma por parte de los programadores.  Esta técnica es conocida como «Código Konami» (aka Konami Command o Contra Code),  empleada originariamente en videojuegos para desbloquear opciones secretas o activar trucos.

huevo de pascua en tu web

A continuación os presento un sencillo script de Javascript que emplea la librería jQuery con el que podréis añadir un código Konami a vuestra Web. Como requisitos sólo es necesario que tengáis la librería de jQuery correctamente incluida en vuestra página. para este ejemplo, empleo «jQuery» en lugar del famoso «$» para invocar a funciones de jQuery.

El código está activo en esta misma página. Si tecleáis «janmi» o «noob«, podréis ver cómo aparece una capa con un gif animado y recorre la pantalla hasta desaparecer. El código es mejorable, y me temo que sólo lo he probado en Chrome. Os invito a que pongáis en los comentarios las mejoras o personalizaciones que hagáis 🙂

Código, a incluir en bloque script en, por ejemplo, el <head>…</head> de tu página:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<script language="javascript">
//######################################################
// W E B   E A S T E R  E G G -  BY JANMI.COM
// Displays web easter egg after a keyboard combination
//######################################################
// C O N F I G U R A T I O N:
//######################################################
//Trigger combinations, in ascii and "-" separated
var key1 = "106-97-110-109-105-";//janmi
var key2 = "110-111-111-98-";//noob
//Image for Trigger 1
var keyimage1 = "http://wallpapersite.net/wp-content/uploads/2013/12/animated-cartoon-carcartoon_car_2gif-j3z8r0zq.gif";
var keyimage2 = "http://fc03.deviantart.net/fs71/f/2013/173/b/6/dumb_running_sonic__animated_gif__by_space_walk-d6a7lue.gif";
//Movement Speed in milliseconds
var keymovementspeed = 2000;
//######################################################
var keycombo = "";	
var tries = 0;
jQuery(document).keypress(function(e) 
{
	try	
	{	
		 keycombo += e.which + "-";
		 tries++; 
		 //Trigger key1!
		 if(keycombo.indexOf(key1)!=-1)
		 {	//Janmi.com 	
			 	keycombo = "";
			 	tries = 0;	 	
			 	//Show new layer
			 	jQuery('body').prepend("<div id='neweasteregg' style='position:absolute;right:0px;top:0px;z-index:9999;display:visible;'></div>");	 	
			 	//Scroot to easter egg
			 	jQuery('html,body').animate({scrollTop: jQuery("#neweasteregg").offset().top},200);	 	
			 	//Move it!!
		   	jQuery('#neweasteregg').animate({'opacity': 'fadeOut', 'paddingRight': jQuery('body').width()}, keymovementspeed);   	
		 } 
		 //Trigger key2!
		 if(keycombo.indexOf(key2)!=-1)
		 {	//Janmi.com 	
			 	keycombo = "";
			 	tries = 0;	 	
			 	//Show new layer
			 	jQuery('body').prepend("<div id='neweasteregg2' style='position:absolute;left:0px;top:0px;z-index:9999;display:visible;'></div>");	 	
			 	//Scroot to easter egg
			 	jQuery('html,body').animate({scrollTop: jQuery("#neweasteregg2").offset().top},200);	 	
			 	//Move it!!
		   	jQuery('#neweasteregg2').animate({'opacity': 'fadeOut', 'paddingLeft': jQuery('body').width()-550}, keymovementspeed);   	
		   	//remove it!
		   	jQuery("#neweasteregg2").fadeOut();
		 } 		 
		 //Reset tries
		 if(tries>=10){tries=0} 
	}catch(e){}
});	
</script>

NOTA: los gifs animados que empleo son de fuentes externas. Es posible que si estas dejan de estar activas, el huevo de pascua no funcione correctamente para este ejemplo.

Aquí tenéis una tabla ascii que os puede ser útil 🙂