Pour cette première version que je présente, j’ai juste réussi à reproduire la boucle du carrousel, mais il n’est pas encore possible d’effectuer un défilement. Voyons déjà comment ça marche.

Vous pouvez déjà jeter un oeil au résultat
La démo

Comme je disais il s’agit là d’une première version qui sera perfectionnée pour faire défiler les diapos en cliquant dessus, mais il s’avère que c’est plus dur qu’il n’y paraît (pour moi en tout cas ^^).
Voici quand même la base qui devrait être la bonne. Déjà le HTML puis le CSS, comme d’habitude, le plus simple possible.

Nausicaa



Mon voisin Totoro



Ponyo sur la falaise



Princesse Mononoke



Le voyage de Chihiro

.boxes {
	width:900px;
	height:300px;
	position:relative;
}
.box {
	width:700px;
	height:300px;
	position:absolute;
}
.box img {
	position:absolute;
	top:0;
	left:0;
}
.box h2 {
	position:absolute;
	right:10px;
	top:10px;
	font-size:40px;
	color:#fff;
	text-shadow: #111 4px 4px 4px;
}

Voici pour la forme brute, et jetons un oeil à ce qui va animer tout ça. Pour le moment il n’est pas pluginisé (quel mot savant!), mais je le ferai d’abord évoluer avant de le faire. Il a aussi un lifting à subir avant, et de pouvoir s’adapter à la structure dans laquelle il se trouve, mon exemple est loin d’être assez générique.

$(document).ready(function(){
	var hauteur = $(".box").height();
	var largeur = $(".box").width();
	var chiffre = ($(".box").length) - 1;
	var etat = "auto";

	$(".box h2").hide();
	$(".box:last h2").show();

	for (i = 0; i < 5; i++) {
		$(".box:eq("+ i +")").css({
			left : i*50,
			height : hauteur+(chiffre - i)*-30,
			top : (chiffre - i)*15
		});
		$(".box:eq("+ i +") img").css({
			height : hauteur+(chiffre - i)*-30
		});
	}

	jQuery.fn.pers = function(){
		$(this).animate({left : '+=50', height : '+=30', top : '-=15'},800);
		$("img", this).animate({height : '+=30'},800);
		$(".box:last").prev(".box").find("h2").delay(600).fadeIn(200);
	}
	jQuery.fn.persRet = function(){
		$(this).animate({left : 300, opacity : 0},400,function(){
			$("img", this).css({height : hauteur+(i-1)*-30});
			$("h2", this).hide();
			$(this)
				.prependTo(".boxes")
				.css({left : 200, top : (i-1)*15, height : hauteur+(i-1)*-30})
				.animate({left : 0, opacity : 1},400, function(){
					etat = "auto";
				});
			});
	}

	jQuery.fn.persRota = function(){
		etat = "autoMov";
		$(this).each(function(){
			if ($(this).index() == chiffre) {
				$(this).persRet();
			}
			else {
				$(this).pers();
			}
		});
	}
	var rota =
		setInterval ( function(rota){
			$(".box").persRota();
		}
		,4000);
});

A vrai dire je sèche un peu pour le faire évoluer et le rendre cliquable, voici le script que j'ai ajouté pour le moment et qui fonctionne presque, mais le comportement n'est pas le bon quand on clique plus que le 2ème dans la liste ou si on clique trop de fois...

	$(".box").click(function(){
		if (etat == "auto") {
			clearInterval(rota);
			clearTimeout(oneRota);
			etat = "manual";
			var index = $(this).index();
			var compt = 1;
			while (compt <= (chiffre - index)) {
				compt++;
				$(".box").persRota();
				var oneRota = setTimeout(function(){
					rota =
						setInterval ( function(rota){
							$(".box").persRota();
							etat = "auto";
						}
						,4000);
				},4000);
			}
		}
	});

Donc il reste un peu de boulot et de prise de tête en vue. D'ailleurs si quelqu'un a une solution je suis tout à fait preneur, n'hésitez pas à étaler votre sciences et montrer vos supers pouvoirs de jQuery!

La démo

A bientôt pour la suite du plugin, moussaillons!

Le site au contenu le plus incroyable que j’ai vu depuis très longtemps, il y a des idées géniales là-dedans!
desandro.com

Non seulement j’admire le contenu de ce site pour sa créativité et son idée d’origine, mais j’adore sa structure. Tellement que je vais penser à une refonte de virtuousquare.fr dans ce genre.
citid.net

Je ne suis pas un fan des sites en flash, sans doute parce que je n’ai jamais maitrisé l’action script, et que je prends ma revanche et mon pied avec javascript. Mais ce site m’a marqué par sa navigation.
journey-to-zero.com

Ce site est relativement simple, mais sa propreté et la qualité de certaines réalisations valent le détour selon moi.
tobiasahlin.com

Je me prends actuellement la tête sur 2 plugins que j’espère présenter bientôt.
A tout’ !

On voit de plus en plus d’effet de transition en javascript, des ‘fade’, des ’slideToggle’, des ’slide’… Un collègue m’a montré ce site avec cet effet d’explosion qui m’a inspiré ce script.
Alors l’effet est moins spectaculaire, mais assez sympa pour une transition originale je trouve.

J’ai imaginé deux applications possible pour cet effet (testé sur firefox 3.6, chrome 3 et safari 4, sur PC).

Voyons la première démonstration, qui propose de révéler une description au survol d’une image et l’explosion de celle-ci.

Comme d’habitude l’idée est de rendre les choses faciles à l’utilisation, alors la structure HTML et le CSS sont très allégés :

une très belle image :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

#container {
	width:900px;
	margin:10px auto;
	position:relative;
}
.explosionBox {
	position:relative;
	float:left;
	margin:0 50px 50px 0;
	width:361px;
	height:276px;
	background:#ddd;
}
.explosionBox p,
.explosionBox img { position:absolute; }
.explosionBox p { padding:10px; }
.hidden { display:none; }

Tout simplement dans votre div, le texte et l’image vont se superposer, et en retirant cette dernière, le texte s’affichera.

Voyons le javascript :

jQuery.fn.split = function() {
	$(this).each(function(){
		$(this).addClass("closed");
		$(this).hover(function(){
			if ($(this).hasClass("closed")) {
				$(this).removeClass("closed").addClass("opened");

				var image = $("img", this);
				var imageSrc = image.attr("src");

				var largeur = image.width();
				var hauteur = image.height();
				var semiLargeur = (image.width())/2;
				var semiHauteur = (image.height())/2;

				$(image).addClass("hidden");
				var box = "


"
				for (i = 0; i < 4; i++) {
					$(box).appendTo(this);
				}

				$(".box", this).css({width : largeur, height : hauteur}).wrap("


");
				$(".quart", this).css({width : semiLargeur, height : semiHauteur});

				$(".box:eq(0)", this).css({left : 0, top : 0});
				$(".box:eq(1)", this).css({left : -semiLargeur, top : 0});
				$(".box:eq(2)", this).css({left : 0, top : -semiHauteur});
				$(".box:eq(3)", this).css({left : -semiLargeur, top : -semiHauteur});

				$(".quart:eq(0)", this).css({left : 0, top : 0}).animate({left : -semiLargeur, top : -semiHauteur, opacity : 0},300);
				$(".quart:eq(1)", this).css({left : semiLargeur, top : 0}).animate({left : largeur, top : -semiHauteur, opacity : 0},300);
				$(".quart:eq(2)", this).css({left : 0, top : semiHauteur}).animate({left : -semiLargeur, top : hauteur, opacity : 0},300);
				$(".quart:eq(3)", this).css({left : semiLargeur, top : semiHauteur}).animate({left : largeur, top : hauteur, opacity : 0},300);

			}
		},function(){
			if ($(this).hasClass("opened")) {
				$(this).removeClass("opened");

				var image = $("img", this);

				var semiLargeur = (image.width())/2;
				var semiHauteur = (image.height())/2;

				$(".quart:eq(0)", this).animate({left : 0, top : 0, opacity : 1},300, function(){
					$(this).prev("img").removeClass("hidden");
					$(this).parent("div").addClass("closed");
					$(this).remove();
				});
				$(".quart:eq(1)", this).animate({left : semiLargeur, top : 0, opacity : 1},300, function(){
					$(this).remove();
				});
				$(".quart:eq(2)", this).animate({left : 0, top : semiHauteur, opacity : 1},300, function(){
					$(this).remove();
				});
				$(".quart:eq(3)", this).animate({left : semiLargeur, top : semiHauteur, opacity : 1},300, function(){
					$(this).remove();
				});
			}
		});
	});
};

Et voici comment l’appeler :

$(document).ready(function(){
	$(".explosionBox").split();
});

Vous pouvez appliquer la class sur autant de div que vous le souhaitez.

Voyons le 2^e exemple

Voici une autre variante de cet effet de transition, une galerie d’images qui défilent quand on clique sur celles-ci. Mais cette fois comme l’évènement est clique, on peut s’amuser avec la position de celui-ci pour découper l’image à un endroit précis, et renforcer l’effet de découpe!

L’objectif est toujours la simplicité d’intégration, et donc un HTML super light. Ici on appelle uniquement les images dans une div de votre choix, il suffit juste de déclarer le title pour la description.
Important à noter, l’ordre d’affichage se fait d’abord par la dernière image et remonte le DOM, et il faut indiquer les dimension (width et height) de la dernière image pour que l’affichage soit correct sur chrome et safari au chargement de la page. (Mais vous déclarez déjà les dimensions puisque c’est une recommandation du W3C, non? ^^)
Voici la structure de base :

C’en est déconcertant de simplicité. Et voici le CSS de base :

#container {
	width:900px;
	margin:10px auto;
}
.splitBox {
	position:relative;
	float:left;
	margin:0 20px 0 0;
	background:#fff;
	border:1px solid #ddd;
}
.splitBox:hover {
	/*box-shadow: 0px 0px 4px #ccc;
	-moz-box-shadow:0px 0px 10px #666;
	-webkit-box-shadow:0px 0px 10px #666;*/
}
.splitBox p,
.splitBox img {
	position:absolute;
	cursor:pointer;
}
.splitBox p {
	padding:5px 10px;
	bottom:0;
	margin:0;
	background:rgba(221, 221, 221, 0.9);

}

Vous noterez que j’ai mis en commentaire un effet de shadow-box sur le bloc lors du survol qui est du plus bel effet, mais ralenti un peu l’animation d’explosion, donc selon votre choix.

Voici le javascript qui rend vivant tout ça :

jQuery.fn.spliter = function(){
	$(this).each(function(){
		var current = 1;
		var etat = false;
		var images = $(this).children("img");
		var chiffre = images.length;
		var i = chiffre - 1;
		images.hide();
		images.last().show();
		var largeur = images.last().width();
		var hauteur = images.last().height();

		var contentP = $("img:eq(" + i + ")", this).attr("title");
		$(this).append("


");
		var largeurPPadding = $("p", this).outerWidth();
		$(this).css({
			width: largeur,
			height: hauteur
		});
		$("p", this).css({
			width: largeur - largeurPPadding
		}).html(current + "/" + chiffre + " : " + contentP);

		$(this).click(function(e){
			if (etat == false) {
				etat = true;
				current++;
				if (current == chiffre + 1) {
					current = 1;
				}
				var i = ($("img", this).length) - 1;
				var image = $("img:eq(" + i + ")", this);
				var imageSrc = image.attr("src");
				var largeur = image.width();
				var hauteur = image.height();
				var posBox = $(this).position();
				var posX = e.pageX - posBox.left;
				var posY = e.pageY - posBox.top;
				var resteX = largeur - posX;
				var resteY = hauteur - posY;
				var imageNext = i - 1;
				var largeurPrev = $("img:eq(" + imageNext + ")", this).width();
				var hauteurPrev = $("img:eq(" + imageNext + ")", this).height();
				var largeurP = $("img:eq(" + imageNext + ")", this).width();

				$(this).animate({
					width: largeurPrev,
					height: hauteurPrev
				}, 600);

				var box = "


"

				for (i = 0; i < 4; i++) {
					$(box).appendTo(this);
				}

				$(".box").css({
					width: largeur,
					height: hauteur
				}).wrap("


");

				$(".box:eq(0)").css({
					left: 0,
					top: 0
				});
				$(".box:eq(1)").css({
					left: -posX,
					top: 0
				});
				$(".box:eq(2)").css({
					left: 0,
					top: -posY
				});
				$(".box:eq(3)").css({
					left: -posX,
					top: -posY
				});

				$(".quart:eq(0)").css({
					left: 0,
					top: 0,
					width: posX,
					height: posY
				}).animate({
					left: -posX,
					top: -posY,
					opacity: 0
				}, 600);
				$(".quart:eq(1)").css({
					left: posX,
					top: 0,
					width: resteX,
					height: posY
				}).animate({
					left: largeur,
					top: -posY,
					opacity: 0
				}, 600);
				$(".quart:eq(2)").css({
					left: 0,
					top: posY,
					width: posX,
					height: resteY
				}).animate({
					left: -posX,
					top: hauteur,
					opacity: 0
				}, 600);
				$(".quart:eq(3)").css({
					left: posX,
					top: posY,
					width: resteX,
					height: resteY
				}).animate({
					left: largeur,
					top: hauteur,
					opacity: 0
				}, 600, function(){
					etat = false;
					$(".quart").remove();
				});

				$(image).prev("img").fadeIn(800);
				$(image).hide().prependTo(this);
				var contentP = $("p", this).prev("img").attr("title");
				$("p", this).animate({
					width: largeurP - largeurPPadding
				}, 600).html(current + "/" + chiffre + " : " + contentP);
			}

		});

		$(this).hover(function(){
			$("p", this).fadeIn(500);
		}, function(){
			$("p", this).stop(true, true).fadeOut();
		});
	});
};

J’essairai de prendre le temps de poser quelques commentaires sur le script, mais si vous avez des questions n’hésitez pas à les poser.
Et l’appel du plugin :

$(document).ready(function(){
	$(".splitBox").spliter();
});

Voilà pour cet effet qui peut être repris de nombreuses façons. On m’a lancé le défi de réaliser quelque chose dans le même genre, mais avec une transition en ondulations, comme à la surface de l’eau… Avec du CSS3, sans doute possible… Encore pas mal de casse-tête en vue.

A bientôt

Un projet vraiment intéressant que j’ai réalisé (après quelques péripéties) et sur lequel je me suis beaucoup amusé. La demande du client était un site qui bouge. Aussi on retrouve pas mal d’élément qui s’anime.
La structure est assez originale et a demandé un peu de réflexion pour l’intégration, mais j’aime les défis.

Le site aviesan, dans le portfolio

Pour rendre cette article un peu plus agréable à lire, l’ami Sam m’a donné une idée avec son site sur lequel il doit publier des interviews, même si on n’en a pas encore vu la couleur. Donc je vais (essayer) de rédiger ce tutoriel comme un interview, j’ai trouvé quelqu’un pour poser des questions sur le plugin et je me ferai une joie de lui répondre.

Le testeur : Mais pourquoi un nouveau plugin de carrousel, comme si il n’y en avait pas assez ? Et d’où vient son nom ’scrollide’ ?

Virtuous : Et pourquoi pas ? Développer son plugin c’est l’assurance d’un plugin optimisé pour son besoin (quand il est bien fait ).
Pour le nom, j’ai eu un éclair de génie, j’ai fusionné scroll et slide, scrollide…

Le testeur : Euh mouai… Et qu’est ce qu’il a d’original ce carrousel ?

Virtuous : L’idée de départ est un carrousel dont le cadre serait la pleine largeur de la page et d’afficher un seul élément à la fois. Pour cela ils est possible de forcer l’espacement des éléments exagérément pour être sûr qu’un seul élément s’affiche, mais l’effet ne serait pas très agréable avec trop d’espacement pour rien, aussi dans ce plugin tout s’adapte. Ensuite un point important est que les puces qui permettent de naviguer entre les éléments sont générées par javascript, inutile de les écrire dans le HTML et de les positionner. Et le top, c’est le tooltip qui met en exergue le texte de votre choix de chaque élément pour l’identifier.

Le testeur : Ouai en gros c’est un carrousel comme les autres… Mais est ce qu’il y a une démonstration pour se faire une idée plus précise ?

Virtuous : Bien entendu, voici la démonstration
Et le plugin

Le testeur : Oh en plus vous avez mis du CSS3 dans l’exemple. Peut-on voir la struture HTML de base ?

Virtuous : Oui ça en jette toujours le font-face. Pour la structure, je vais vous présenter la structure de base :

gauche



....



droite

C’est très simple, ici ‘container’ joue le rôle de positionneur. La div ’slider’ sera notre bloc conteneur et qui se déplacera, les div qu’il contient étant chacune un élément qui s’affiche tour à tour. Les boutons sont à placer de chaque côté de la div conteneur. A noter que j’ai donné des id et class dans mon exemple, mais vous pouvez choisir celles que vous voulez sans toucher au plugin.

Le testeur : C’est bien beau tout ça, mais quelles sont les classes générées si je veux customiser mes boutons et autres, à quoi doit ressembler mon CSS ?

Virtuous : Certaines classes sont générées par la javascript, je vais donc vous indiquer lesquelles et présenter le CSS minimum requis pour faire fonctionner le plugin.

body { overflow-x:hidden; } /*Permet de masquer le scroll horizontal de la page*/
#container { /*Ce bloc dont vous pouvez choisir le nom, est l'élément positionneur*/
	width:970px; /*pour l'exemple*/
	margin:0 auto; /*le plugin est fait pour les structures centrées!*/
	position:relative; /*Important pour la position*/
}
#container a.droite,
#container a.gauche { /*Les liens dont le nom est au choix*/
	position:absolute; /*Plus faciles à positionner*/
	top:220px; /*pour l'exemple*/
	z-index:10; /*A gérer suivant vos besoins*/
}
#container a.droite {
	right:0; /*Positionne le lien à droite*/
}
#slider { /*Ce bloc dont vous pouvez choisir le nom, est l'élément conteneur*/
	position:absolute; /*Il va se déplacer!*/
	float:left;
}
.diapo { /*Ce bloc dont vous pouvez choisir le nom, sera la référence pour chaque fenêtre*/
	width:970px; /*pour l'exemple*/
	height:450px;  /*pour l'exemple*/
}
ul.lister { /*Liste générée par le javascript pour les puces*/
	position:absolute; /*Important pour le positionnement*/
	left:0; /*facultatif puisque la liste est repositionnée au centre*/
	top:400px; /*Ajoutez la hauteur que vous voulez*/
	z-index:9; /*A gérer suivant votre besoin*/
}
.lister li { /*Listes générées par le javascript*/
	float:left; /*Important pour leurs positionnements*/
	list-style:none; /*De préférence*/
	margin-right:10px; /*Pour l'exemple, géré selon le besoin*/
	position:relative; /*Important pour positionner le tooltip*/
	width:26px; /*Pour l'exemple*/
	height:26px; /*Pour l'exemple*/
	background:url(../images/puce.png) top no-repeat; /*Pour l'exemple*/
	cursor:pointer; /*Pour donner l'effet 'lien'*/
}
.lister li span { /*Va afficher le texte pris dans la fenêtre que vous avez choisi en variable (h2 par défaut)*/
	position:absolute; /*Important pour le positionnement*/
	width:100px; /*Pour l'exemple*/
	bottom:30px; /*Pour l'exemple*/
	padding:5px 10px; /*Pour l'exemple*/
	background:#be997f; /*Pour l'exemple*/
	text-align:center; /*Pour l'exemple*/
	color:#fff; /*Pour l'exemple*/
}
.lister li.current { /*Cette class est ajoutée à la puce dont la fenêtre est affichée*/
	background-position:bottom;
}

Voilà ce qu’il y a à savoir pour une configuration minimale. après vous pouvez habiller à votre goût.

Le testeur : Ok, et peut-on avoir un aperçu du javascript ? Je parie que c’est un gros fouilli!

Virtuous : C’est vrai que ce n’est pas organisé de façon optimum, mais j’espère que ça vous semblera clair, je vais commenter les parties importantes.

jQuery.fn.scrollide = function(options) { /*Initialise la fonction*/
	var defaults = { /*Variable par défaut*/
		cible: "h2" /*Référence de ce qui sera affiché dans le tooltip des puces*/
	};

	var opts = jQuery.extend(defaults, options);

	$(this).children("div").wrap("


"); /*Pour chaque bloc, on créé une enveloppe qui va positionner la suivante hors du cadre de la fenêtre*/

	var diapos = $(this).children("div").children("div").length;
	var largeur = $(this).children("div").children("div").width();

	var decalage = ($(window).width() - largeur)/2; /*L'espace entre le bord du bloc et le bord de la fenêtre*/
	var wrap = largeur + decalage + 10;

	$(this).children("div").css({width : wrap});

	var largeurTot = diapos*wrap;
	$(this).css({width : largeurTot}); /*Défnit la largeur totale du bloc conteneur*/

	var current = 0;
	var element = $(this);
	var elementParent = $(this).parent().parent();

	$("


").prependTo(elementParent); /*On génère la liste des puces*/
	for (i = 0; i < diapos; i++) {
		var textes = $(".diapo:eq("+ i +") "+ opts.cible +"").text();
		$("ul.lister").append("
"+ textes +"

"); /*On injecte le contenu voulu pour le tooltip*/
	}

	var ulLargeur = $("ul.lister").width();
	var posList = (($(elementParent).width())/2) - (ulLargeur/2);
	$("ul.lister").css({left : posList}); /*On positionne la liste au centre*/

	/*Fonctionnement du tooltip*/
	var toolLargeur = $("li span").width();
	$("ul.lister li span").hide().css({left : -(toolLargeur/2)});
	$("ul.lister li").hover(function(){
		$(this).find("span").fadeIn();
	},function(){
		$(this).find("span").stop(true,true).fadeOut();
	});

	$("ul.lister li:eq("+ current +")").addClass("current");
	var prevBtn = $(this).prev("a");
	var nextBtn = $(this).next("a");
	$(prevBtn).hide(); /*Ce bouton est toujours caché à l'initialisation*/

	$(prevBtn).click(function(){ /*Pour le clique gauche*/
		if (current > 0) {
			current--;
			if (current == 0) {
				$(this).fadeOut();
			}
			if (current < diapos - 1) {
				$(nextBtn).fadeIn();
			}
			$(element).animate({left : '+=' + wrap},500);
			$("ul.lister li").removeClass("current");
			$("ul.lister li:eq("+ current +")").addClass("current");
		}
	});
	$(nextBtn).click(function(){ /*Pour le clique droit*/
		if (current < diapos - 1) {
			current++;
			if (current == diapos - 1) {
				$(this).fadeOut();
			}
			if (current > 0) {
				$(prevBtn).fadeIn();
			}
			$(element).animate({left : '-=' + wrap},500);
			$("ul.lister li").removeClass("current");
			$("ul.lister li:eq("+ current +")").addClass("current");
		}
	});

	$("ul.lister li").click(function(){ /*Pour l'utilisation des puces*/
		var attr = $(this).attr("class");
		current = attr;
		if (current == 0) {
			$(prevBtn).fadeOut();
		}
		if (current < diapos - 1) {
			$(nextBtn).fadeIn();
		}
		if (current == diapos - 1) {
			$(nextBtn).fadeOut();
		}
		if (current > 0) {
			$(prevBtn).fadeIn();
		}
		$(element).animate({left : attr*-wrap},500);
		$("ul.lister li").removeClass("current");
		$(this).addClass("current");
	});
};

Voilà pour le javascript.

Le testeur : C’est pas très bien expliqué tout ça, enfin bref. Comment fait-on pour appeler cette fonction scrollide et surtout gérer la variable du tooltip ?

Virtuous : Bonne question! C’est tout simple, voici ce que vous devez mettre dans votre page :

$(document).ready(function(){
	$("#slider").scrollide({
		cible: "h3"
	});
});

Dans l’exemple on a ciblé les h3 de chaque bloc pour les injecter dans les tooltips des puces. (Pour rappel c’est h2 par défaut).

Voilà pour l’explication du fonctionnement du plugin, j’espère que ce n’est pas trop confus. C’est loin d’être parfait, mais ça fonctionne (testé sur firefox 3.6, le dernier chrome et safari, ainsi que Opera 10.52).

Vous aurez deviné que le testeur était autre que moi-même. quelqu’un se prêtera peut etre au jeu la prochaine fois ? :p

Le prochain article est déjà en chantier, alors à bientôt pour de nouvelles aventures avec jQuery!

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 !

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 :

		A droite !
		A gauche !
	

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!

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

	Open menu

Premier lien
Deuxième lien
Troisième lien

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 :

	Keep pressing 'UP'To open the menu

		Home
		About
		Portfolio
		Contact
		Flux RSS
		Links
	

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.

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.