Archive pour avril 2010

Effets de lumières sous-marine avec jQuery et du CSS3 (subMarine plugin)

Jeudi 29 avril 2010

D’habitude j’essaie de faire des articles avec des javascripts qui pourront être utiles… Dans le sens fonctionnels. Mais aujourd’hui je vous présente un petit script complètement inutile, mais dont je trouve l’effet assez jolie. Et une fois n’est pas coutume je vous l’ai mis en plugin.

L’objectif de ce script était de créer une ambiance dans une page web, et pour cela il fallait éviter que l’effet soit redondant pour ne pas lasser. Aussi la plupart des éléments de ce script seront complètement aléatoires. Pour cela la page ne doit contenir aucun élément à la base pour que nous puissions jouer avec différentes variables comme le nombre. Nous jouerons aussi avec la hauteur des rayons et leurs largeurs, ainsi que l’opacité. Pour cela rien de tel que du CSS3 plutôt que des images!

La démonstration

Le plugin subMarine

Cet effet fonctionne sur les navigateurs supportant le CSS3 bien sûr, soit les derniers Firefox, Safari, Chrome et sans doute sur mac (clin d’oeil dans la direction d’un certain Manu). Je remarque les limites de mon navigateur favori Firefox qui rame un peu sur l’animation, contrairement aux 2 autres qui assurent.

Ce petit effet utilise notre bonne bibliothèque jQuery, et le plugin timers (par conséquent il faudra utiliser la version 1.3.2 de jQuery, sinon vous devrez utiliser un bon vieux setInterval pour faire la boucle, ce qui n’est pas plus mal.)

Notre structure HTML est archi simple, en effet nous allons nous servir d’un repère et créer à l’intérieur les élement qui feront les rayons.

Puis voici le CSS assez léger également, mais comportant tout le CSS3 pour créer notre reflet. J’aurais aussi pu faire le dégradé du background… mais je ne l’ai pas fait… Si vous voulez changer la couleur du background il vous faudra aussi adapter la couleur de fin du reflet. On utilise des tailles par défaut mais qui seront recalculées par javascript, ainsi que l’opacité.

body {
	background:#006699 url(../images/top.png) repeat-x;
}
#reflets {
	position:relative;
	width:900px;
	margin:0 auto;
}
.gradient {
	position:absolute;
	background: #fff; /* for non-css3 browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#006699)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #fff,  #006699); /* for firefox 3.6+ */
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
	-o-transform: rotate(-15deg);
	opacity:0.3;
	top:-20px;
}

Voici comment appeler le plugin, si vous utilisez un id ‘reflets’ :

$(document).ready(function(){
	$("#reflets").subMarine();
});

Je vous mets également le plugin complet ici, si vous voulez le détailler tranquillement.

jQuery.fn.subMarine = function(){
	var bloc = $(this).width();
    var chiffre = (Math.floor(Math.random() * 10)) + 5;
    for (i = 0; i < chiffre; i++) {
        $(this).append('
'); var pos = Math.floor(Math.random() * bloc); var hauteur = (Math.floor(Math.random() * 100)) + 200; var largeur = (Math.floor(Math.random() * 30)) + 20; $(".g" + i).css({ left: pos, height: hauteur, width: largeur, opacity: 0 }); jQuery.fn.mouv = function(){ var posNew = Math.floor(Math.random() * bloc); var hauteurNew = (Math.floor(Math.random() * 100)) + 200; var largeurNew = (Math.floor(Math.random() * 30)) + 20; var niveau = (Math.random() * 0.3) + 0.2; var duree = (Math.floor(Math.random() * 3000)) + 15000; $(this).animate({ left: posNew, height: hauteurNew, width: largeurNew, opacity: niveau }, duree); }; $(".g" + i).mouv(); var j = i; for (j = 0; j < chiffre; j++) { $(".g" + i).everyTime(15000, function(){ $(this).mouv(); }); } } };

Alors je n'ai pas fait le boulot complètement, car l'idéal aurait été que je mette des petites variables à modifier à l'extérieur, comme le nombre minimum et max... J'ajouterai ça plus tard. ^^

J'espère que ce petit script vous inspirera, n'hésitez pas à donner vos remarques.
A bientôt !

Un carrousel circulaire avec jQuery et jQuery Path

Dimanche 25 avril 2010

Je cherchais une autre utilisation à ce très bon plugin qu’est jQuery Path et j’ai pensé à un carrousel dont les éléments se déplacerait sur un cercle, rien de bien extraordinaire, mais un effet sympa et surtout un exercice plus dur que ce à quoi je m’attendais.

Tout d’abord je remercie Fabien pour son aide sans qui je n’aurais sans doute pas réussi, mais je pense qu’il a aussi bien apprécier ce petit casse-tête, dont voici le résultat.

La démo du carroussel

Cet effet n’est pas sans rappeler celui du plugin roundAbout, mais il apporte quelques différences notables qui pourraient être utiles à certains.

Voici la structure HTML :

  • image
  • image
  • image
  • image
  • image
  • image
  • image

Dans notre exemple le carrousel occupe toute la largeur de la page et les éléments du haut sortent du cadre.
Nous plaçons toutes les images (dont la taille peut varier) dans une liste toute simple. Puis nous ajoutons 2 boutons à sa suite. Tout simplement.

Puis vient le CSS :

#container {
	width:100%;
	overflow:hidden;
	height:500px;
}
#container ul {
	margin:200px auto;
	position:relative;
	width:370px;
}
#container li {
	list-style:none;
	position:absolute;
}
.gauche,
.droite { position:absolute; }
.gauche { left:200px; }
.droite { right:200px; }

Nous déclarons une taille au container pour qu’il puisse afficher les éléments, mais vous pouvez adapter à votre guise, de même que pour la liste.
Les éléments de la liste doivent être positionnés par rapport à celle-ci.

Encore du tout simple, j’aime ça! A ce stade tous vos éléments doivent s’afficher les uns sur les autres, pas de panique javascript va nous positionner tout ça.

Pour faire fonctionner ce script vous aurez donc besoin de jquery et de jQuery Path!
Allons-y pour le script :

var nombre = $("#container ul li").length;
	var ecart = 360/nombre;
	var posDep = 0;
	var posArr = 0;
	var current = 0;
	var centerX = 0;
	var centerY = -500;
	var radius = 500;
	for (i = 0; i < nombre; i++) {
		posDep = i*ecart;
		posArr = posDep - ecart;
		eval("var arc_params" + i +" = {center: [centerX, centerY],radius: radius,start: posDep,end: posArr,dir: 1}");
		$("#container li:eq(" + i + ")").animate({
			path: new $.path.arc(eval("arc_params" + i))
		},0);
	}
	$("button.gauche").click(function(){
		for (i = 0; i < nombre; i++) {
			var newstart = eval("arc_params" + i +".start;");
			var newend = eval("arc_params" + i +".end;");
			var dir = eval("arc_params" + i +".dir;");
			newstart = newend;
			newend += ecart;
			dir = 1;
			eval("arc_params" + i +".start = newstart; arc_params" + i +".end = newend; arc_params" + i +".dir = dir;");
			$("#container li:eq(" + i + ")").animate({
				path: new $.path.arc(eval("arc_params" + i))
			},500);
		}
	});
	$("button.droite").click(function(){
		for (i = 0; i < nombre; i++) {
			var newstart = eval("arc_params" + i +".start;");
			var newend = eval("arc_params" + i +".end;");
			var dir = eval("arc_params" + i +".dir;");
			newstart = newend;
			newend -= ecart;
			dir = -1;
			eval("arc_params" + i +".start = newstart; arc_params" + i +".end = newend; arc_params" + i +".dir = dir;");
			$("#container li:eq(" + i + ")").animate({
				path: new $.path.arc(eval("arc_params" + i))
			},500);
		}
	});

La première partie va définir les différentes variables utilisées, les images se placeront automatiquement suivant leurs nombres, super!!
Vous pouvez modifier le rayon du cercle et la position de son centre.
On ne peut utiliser que l'effet 'animate' avec jQuery Path, donc pour positionner les images on dit que cet effet dure 0 seconde, pour que ce soit instantané.

La suite (un peu redondante) va servir pour les événements de click. On redéfinit à chaque clique les positions de départ et d'arrivée et suivant le bouton on change la direction.

Voilà pour ce petit tuto, encore un peu rapide. J'espère que vous trouverez des applications ou que ça vous donnera des idées.

Merci de l'avoir lu et à bientôt!

2 exemples de navigation suivant la souris avec jQuery

Mercredi 21 avril 2010

Je continue de partager avec vous les choses qui me passent par la tête et que je me débrouille (tant bien que mal) à réaliser.
Vous vous souvenez de ces navigations flash qui suivaient la souris et qui se déployaient autour du curseur ? Amusons-nous avec notre bibliothèque javascript préférée.

Il y a de nombreuses façons d’appliquer ce concept de menu mobile, je vous propose 2 possibilités.

La première étant un bloc glissant sur le côté et suivant les mouvements de la souris seulement dans l’axe verticale, et un menu qui se déploie sur toute la longueur de la colonne de contenu.

La démo 1

Voici la structure HTML du menu uniquement


Le menu étant le bloc qui va contenir toute la navigation. On place les boutons dans une liste qu’on camoufle et qui s’ouvrira quand on cliquera sur le ’bouton opener’.

Voici le CSS :

#container {
	position:relative;
	width:800px;
	margin:0 auto;
	padding:50px 20px;
	height:1200px;
	background:#fefefe;
	border:1px solid #eee;
	border-top:none;
	border-bottom:none;
}
#menu {
	position:absolute;
	display:block;
	padding:0;
	color:#fff;
	left:0;
	top:0;
	width:840px;
	height:40px;
}
.opener {
	cursor:pointer;
	position:absolute;
	float:left;
	width:120px;
	background:#555;
	text-align:center;
	padding:10px 0;
	color:#fff;
	left:-110px;
	border-right:1px solid #ddd;
	-webkit-border-radius:4px 0 0 4px;
	-moz-border-radius:4px 0 0 4px;
	/*border-radius:4px 0 0 4px;*/
}
.opener:hover,
.opener:focus,
.opened {
	background:#eee;
	color:#474747;
}
#menu ul {
	margin:0;
	height:38px;
	width:840px;
	background:#eee;
}
#menu li {
	float:left;
	list-style:none;
	border-right:1px solid #ddd;
	padding:0;
}
#menu li a {
	float:left;
	padding:10px 20px 9px 20px;
	background:#eee;
}
#menu li a:hover {
	background:#eee;
}

Et sans plus de détails, voici le javascript :

$(document).mousemove(function(e){
	$(".close").stop(true,false).animate({top : (e.pageY - 15)},500)
});
$("#menu ul").hide();
$("#menu span").click(function(){
	$(this).removeClass('close');
	$("#menu ul").slideDown();
	$("#menu .opener").addClass('opened');
});
$("#menu").mouseleave(function(){
	$(this).addClass('close');
	$("#menu ul").slideUp();
	$("#menu .opener").removeClass('opened');
});

Ce qui est essentiel ici, c’est la petite fonction qui passe presque inaperçu ‘.pageY’ qui va nous renvoyer la position de notre souris (verticalement). Et grâce au ‘animate’, nous allons donner l’impression que le bloc suit la souris, n’oubliez pas le ’stop(true,false)’ pour la fonction se recharge au moindre déplacement.

Et voici le deuxième menu qu’on faisait il n’y a pas si longtemps que ça entièrement en flash, mais c’est beaucoup de contraintes, et javascript c’est quand même bien plus marrant, non ? :p

Voici la démo 2

Et la structure HTML du menu :


Et le CSS associé :

#container {
	position:relative;
	width:800px;
	margin:0 auto;
	padding:50px 20px;
	height:1200px;
	background:#fefefe;
	border:1px solid #eee;
	border-top:none;
	border-bottom:none;
}
#menu {
	position:absolute;
	width:100px;
	height:100px;
}
#menu a {
	float:left;
	width:32px;
	height:32px;
	position:absolute;
	display:none;
}
#menu a.home {
	background:url(../images/Home.png) no-repeat;
	top:80px;
	left:34px;
}
#menu a.about {
	background:url(../images/User.png) no-repeat;
	top:-20px;
	left:34px;
}
#menu a.folio {
	background:url(../images/Pictures.png) no-repeat;
	top:10px;
	left:75px;
}
#menu a.contact {
	background:url(../images/Chat.png) no-repeat;
	top:60px;
	left:75px;
}
#menu a.rss {
	background:url(../images/RSS.png) no-repeat;
	top:60px;
	left:-10px;
}
#menu a.links {
	background:url(../images/Address_Book.png) no-repeat;
	top:10px;
	left:-10px;
}
#menu a span {
	display:none;
	position:absolute;
	padding:3px 5px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	/*border-radius:4px;*/
	background:#666;
	color:#fff;
	top:-30px;
	z-index:9;
}
.note {
	background:#666;
	color:#fff;
	display:block;
	padding:5px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	/*border-radius:4px;*/
	width:110px;
}

Ici j’ai placé les images en absolue et j’ai indiqué leur position en top et left, mais j’aurais pu m’en passer puisque les icônes sont cachées et se positionnent grâce au javascript quand elles apparaissent.

Et le petit javascript qui va avec :

var winWidth = $(window).width();
	var contWidth = $("#container").width();
	var decalage = ((winWidth - contWidth) / 2);

	jQuery.fn.follow = function(){
		$(document).mousemove(function(e){
			$(".close").css({top : (e.pageY - 50), left : ((e.pageX - decalage)-30)});
		});
	};

	const mobil = 0;
	const arret = 1;
	var deplac = mobil;

	$("#menu").addClass('close').follow();

	$(window).keydown(function(event) {
		var arc_paramsHome = {
	    	center: [34,30],
	        radius: 50,
	        start: 0,
	        end: 1,
	        dir: -1
		}
		var arc_paramsAbout = {
	    	center: [34,30],
	        radius: 50,
	        start: 180,
	        end: 181,
	        dir: -1
		}
		var arc_paramsFolio = {
	    	center: [34,30],
	        radius: 50,
	        start: 120,
	        end: 121,
	        dir: -1
		}
		var arc_paramsContact = {
	    	center: [34,30],
	        radius: 50,
	        start: 60,
	        end: 61,
	        dir: -1
		}
		var arc_paramsRss = {
	    	center: [34,30],
	        radius: 50,
	        start: 300,
	        end: 301,
	        dir: -1
		}
		var arc_paramsLinks = {
	    	center: [34,30],
	        radius: 50,
	        start: 240,
	        end: 241,
	        dir: -1
		}

		$("#menu a").hover(function(){
			$(this).find("span").fadeIn();
		},function(){
			$(this).find("span").stop(true,true).fadeOut();
		});

		if (event.keyCode == '38') {
			if (deplac == mobil) {
				deplac = arret;
				$("#menu").removeClass('close');
				$("#bloc a").fadeIn(50);
				$("#menu .note").fadeOut();
				$("#menu a.home").animate({path : new $.path.arc(arc_paramsHome)},500);
				$("#menu a.about").animate({path : new $.path.arc(arc_paramsAbout)},500);
				$("#menu a.folio").animate({path : new $.path.arc(arc_paramsFolio)},500);
				$("#menu a.contact").animate({path : new $.path.arc(arc_paramsContact)},500);
				$("#menu a.rss").animate({path : new $.path.arc(arc_paramsRss)},500);
				$("#menu a.links").animate({path : new $.path.arc(arc_paramsLinks)},500);
			};
		};
	});
	$(window).keyup(function(event) {
		deplac = mobil;
		$("#bloc a").fadeOut(function(){
			$("#menu .note").fadeIn();
		});
		$("#menu").addClass('close');
	});

Comme ça il a l’air grand, mais c’est que je n’ai pas trouvé le moyen de réduire les variables de rotations.

On utilise les fameux .pageX et .pageY pour récupérer la position de la souris et on positionne le menu grâce à un ‘.css()’ qui nous repositionne la div en direct.

Alors le gros défaut de cette version pour le moment c’est qu’on ne peut pas cliquer sur les liens de la page même ou sélectionner un texte à cause de la div ‘note’ que j’ai mise pour indiquer quelle touche enfoncer. Mais il y a possibilité d’éviter ça, il suffit de ne pas mettre de note et d’indiquer la façon de procéder autrement.

J’espère que cet article vous inspirera, amusez-vous bien.

Animez des sprites avec CSS et jQuery et changez leurs états avec le clavier

Dimanche 11 avril 2010

Suite de l’article précédent pour une navigation web originale rappelant un jeu-vidéo. Cette fois nous allons voir les animations de sprites avec jQuery.

L’utilisation de gif est dure à gérée en cas de modification de l’animation, la qualité se fait au prix d’un poids excessif. La solution alternative est donc le sprite …euh non pas la boisson… Pour ceux qui ne connaissent pas, c’est une planche d’images sur laquelle on trouve tous les états d’une animation.

Dans notre exemple l’animation du personnage si on clique sur la droite ou la gauche, ce qui fait 4 animations du personnage en tout. Voyez plutôt :

La démonstration

Comme dans l’article précédent, la structure HTML est minimaliste :

Et le CSS également est très light :

body {
	margin:0;
}
#container {
	position:absolute;
	width:1000px;
	height:300px;
	background:#92d2ed;
}
#sol {
	position:absolute;
	width:2000px;
	height:36px;
	bottom:0;
	background:url(../images/sol.png) repeat-x;
	z-index:50;
}
#perso {
	position:absolute;
	width:61px;
	height:73px;
	background:url(../images/nu.png) -21px -128px no-repeat;
	top:195px;
	left:460px;
	z-index:40;
}

Et voici le javascript qui anime le personnage et permet de détecter le pressage de touches.
Nous utilisons le plugin de background position et le plugin timers, qui permet de remplacer les setTimeOut et setInterval.

$(document).ready(function() {
	jQuery.fn.arretDrt = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-21px -128px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-121px -128px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-221px -128px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-121px -128px'});
		});
	};
	jQuery.fn.mouvArretDrt = function(){
		$(this).arretDrt();
		$(this).everyTime(800,function(){
			$(this).arretDrt();
		});
	}
	jQuery.fn.arretGch = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-23px -28px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-123px -28px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-223px -28px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-123px -28px'});
		});
	};
	jQuery.fn.mouvArretGch = function(){
		$(this).arretGch();
		$(this).everyTime(800,function(){
			$(this).arretGch();
		});
	}
	jQuery.fn.marcheDrt = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-18px -328px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-118px -328px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-218px -328px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-318px -328px'});
		});
	};
	jQuery.fn.mouvMarcheDrt = function(){
		$(this).marcheDrt();
		$(this).everyTime(800,function(){
			$(this).marcheDrt();
		});
	}
	jQuery.fn.marcheGch = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-23px -228px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-123px -228px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-223px -228px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-323px -228px'});
		});
	};
	jQuery.fn.mouvMarcheGch = function(){
		$(this).marcheGch();
		$(this).everyTime(800,function(){
			$(this).marcheGch();
		});
	}
	$("#perso").mouvArretDrt();

	var arret = 0;

	$(window).keydown(function(event) {
		if (event.keyCode == '39') {
			if (arret == 0) {
				arret = 1;
				$("#perso").stopTime().removeClass('gch').mouvMarcheDrt();
			}
		}
		if (event.keyCode == '37') {
			if (arret == 0) {
				arret = 1;
				$("#perso").stopTime().addClass('gch').mouvMarcheGch();
			}
		}
	});
	$(window).keyup(function(event) {
		if (arret == 1) {
			arret = 0;
			$("#perso").stopTime().mouvArretDrt();
			$(".gch").stopTime().mouvArretGch();
		}
	});
});

J’ai posté cet article rapidement (je n’ai même pas fini d’habiller le personnage, qui utilise la base des personnages de Maple Story), j’éditerai pour plus de détails, et bientôt la suite pour aller plus loin dans la navigation façon jeu-vidéo.
Merci à Fabien pour les flags.

Une navigation web comme un jeu-vidéo avec jQuery et CSS.

Samedi 3 avril 2010

Bonjour tout le monde, ça faisait un moment que je n’avais pas posté, mais ceux qui suivent un peu mon actualité savent que je suis l’heureux papa d’une adorable petite fille dont voici le blog : Bonjour de Nina.

Pour ce retour, je vous présente une nouvelle idée que je compte utiliser pour un prochain site.
L’idée est assez simple, faire du site un véritable jeu. On oublie la souris et le côté ‘point and click’ des sites conventionnels et on transforme le curseur en un personnage qui va évoluer dans une page web construite comme un stage de Mario Bros ou ce que vous imaginerez.

Pour cet exemple, j’ai justement utilisé l’univers du célèbre plombier et un gameplay semblable : Avancer dans 2 directions et la possibilité de sauter. Ici les liens deviennent les blocs suspendus dans l’air, en les heurtant vous pourrez changer de page.

Voici la démonstration du site/jeu

Pour réaliser ce mini-jeu, nous allons comme toujours utiliser notre inépuisable bibliothèque jQuery et quelques plugins vraiment très utiles :

  • Le background position
  • Le plugin ‘easing’
  • Plugin pour des courbes
  • La structure HTML est vraiment minimale, on place tous les éléments composant la page en absolut afin d’intéragir facilement avec eux.

    Frappe-moi,j'suis un lien !
    Hit me,I'm a link !
    Retour /Go back.

    Et le CSS qui va avec, rien de compliqué, on positionne nos éléments comme on souhaite les voir apparaître, même si c’est surtout le javascript qui va faire tout le boulôt.

    body {
    	margin:0;
    	font-size:9px;
    	font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    #container {
    	width:1000px;
    	height:450px;
    	margin:0 auto;
    	position:relative;
    	background:#cbefff url(../images/decor.png) 0px 500px no-repeat;
    	overflow:hidden;
    }
    #perso {
    	position:absolute;
    	width:30px;
    	height:44px;
    	top:377px;
    	left:100px;
    	background:url(../images/mario.png) 0px 0px no-repeat;
    	overflow:hidden;
    }
    .case {
    	position:absolute;
    	width:43px;
    	height:35px;
    	background:url(../images/case.png) no-repeat;
    	top:268px;
    }
    .c1 { left:461px; }
    .c2 { left:791px; }
    .c3 { left:891px; }
    #legend {
    	position:absolute;
    	width:147px;
    	height:97px;
    	background:url(../images/legend.png) no-repeat;
    	top:20px;
    	left:20px;
    }
    .smile {
    	width:95px;
    	height:51px;
    	padding-top:50px;
    	text-align:center;
    	position:absolute;
    	background:url(../images/smile.png) no-repeat;
    	top:150px;
    }
    .s1 { left:435px; }
    .s2 { left:765px; }
    .s3 { left:865px; }
    

    Voyons sans plus attendre le coeur du sujet, le javascript. Je vais détailler les 2 parties principales du script, la mise en place du décor et les évènements de navigations.
    En effet, il fallait une petite introduction sympa à cette page, alors tous les éléments sont positionnés avec des animate et compagnie.

    $("#container").delay(1000).animate( /*Noté le 'delay', très pratique pour faire une pause.*/
    	{"backgroundPosition": "0px 0px"},
    	{
    		duration: 800,
    		easing: 'easeOutBounce' /*L'effet de rebondissement*/
    	});
    
    $(".case").css({top:-100});
    $(".case").delay(1200).animate(
    	{top:268},
    	{
    		duration: 1000,
    		easing: 'easeOutBounce'
    	});
    $("#perso").delay(1600).css({top:-100});
    $("#perso").delay(500).animate(
    	{top:377},
    	{
    		duration: 1000,
    		easing: 'easeOutBounce'
    	});
    $("#legend").hide().delay(1500).fadeIn(500);
    setInterval (function(){ /*Va nous permettre de faire tourner en boucle cette animation*/
    	$(".smile").animate({top:140},800).animate({top:150},800);
    },1600);
    $(".smile").hide().css({top:170}).delay(2000).fadeIn(200);
    

    Il est possible de réaliser tout une animation linéaire d’introduction grâce au javascript, et pourquoi pas faire tout un dessin animé ? :)

    Voici la partie ‘intéractive’ du javascript, c’est à dire à partir du moment où on presse une touche du clavier. Dans notre exemple seulement 3 touches entrainent des animations, nous allons donc utiliser de multiples conditions.
    Ce qui est important dans la plupart des jeux, ce sont les collisions entre les éléments. Ici nous n’allons pas vraiment en faire, nous allons les simuler en récupérant la position du personnage, et s’il se trouve à certains endroits quand il saute, nous saurons qu’il doit entrer en contact avec les cases.

    $(window).keydown(function(event) { /*Dès qu'une touche du clavier est enfoncée...*/
    	var pos = $("#perso").position().left; /*Cette variable récupère la position du personnage*/
    
    	if (event.keyCode == '39') { /*Si la flèche de droite est enfoncée*/
    		if ((pos > -10) && (pos < 970)) { /*Pour que le personnage ne sorte pas du champ*/
    			$("#perso")
    			.removeClass("dos") /*Si le personnage était dans l'autre direction*/
    			.css({
    				backgroundPosition: '0px 0px'
    			}).animate({ /*On le déplace vers la gauche*/
    				left: '+=5'
    			}, 20, "linear");
    		}
    	}
    	if (event.keyCode == 37) { /*Si on presse la flèche de gauche*/
    		if ((pos > 0) && (pos < 980)) {
    			$("#perso")
    			.addClass("dos")
    			.css({
    				backgroundPosition: '0px -44px'
    			}).animate({
    				left: '-=5'
    			}, 20, "linear");
    		}
    	}
    
    	var bezier_paramsdos = { /*Les variables pour gérer les courbes des sauts*/
    	    start: {
    	      x: pos,
    	      y: 377,
    	      angle: 350
    	    },
    	    end: {
    	      x: pos - 60,
    	      y: 377,
    	      angle: 100,
    	      length: -4
    	    }
    	}
    	var bezier_params = {
    	    start: {
    	      x: pos,
    	      y: 377,
    	      angle: 10
    	    },
    	    end: {
    	      x: pos + 60,
    	      y: 377,
    	      angle: 80,
    	      length: 4
    	    }
    	}
    
    	if (event.keyCode == '38') { /*Si on presse la flèche du haut*/
    		if ($("#perso").hasClass("dos")) { /*Si le personnage est tourné vers la gauche*/
    			if ((pos > 60) && (pos < 980)) {
    				if ((pos < 511) && (pos > 461)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c1").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					}); /*A la fin de l'animation, réorientation de la page.*/
    				};
    				if ((pos < 841) && (pos > 791)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c2").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos < 941) && (pos > 891)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c3").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/?p=244");
    					});
    				};
    				$("#perso").stop(true, true).css({
    						backgroundPosition: '-30px -44px'
    					}).animate({
    					path: new $.path.bezier(bezier_paramsdos)
    				}, 500,function(){
    					$("#perso").css({backgroundPosition:'0px -44px'})
    				});
    			}
    		}
    		else {
    			if ((pos > 0) && (pos < 920)) { /*Si le personnage est tourné dans l'autre direction*/
    				if ((pos > 411) && (pos < 461)) {
    					$(".c1").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos > 741) && (pos < 791)) {
    					$(".c2").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos > 841) && (pos < 891)) {
    					$(".c3").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/?p=244");
    					});
    				};
    				$("#perso").stop(true, true).css({
    						backgroundPosition: '-30px 0px'
    					}).animate({
    					path: new $.path.bezier(bezier_params)
    				}, 500,function(){
    					$("#perso").css({backgroundPosition:'0px 0px'})
    				});
    			}
    		}
    	}
    });
    

    Voici pour cette première approche des sites/jeux. La prochaine étape va être d'animer les personnages lorsqu'ils se déplacent, et au lieu d'utiliser des gifs, nous le ferons avec des sprits et du javascript bien sûr. ;)
    Puis nous tenterons de corser un peu la chose avec des monstres à éviter ou à anéantir... Bref, beaucoup de choses en perspective.
    A bientôt.