Si vous avez déjà créé des jeux vidéos 2D, vous allez être étonné par ce que l'on peut faire avec du CSS et du Javascript !

Voici un menu animé mettant en scène plusieurs personnages qui marchent pour faire découvrir l'intitulé du menu lorsque l'on passe notre souris dessus.

Une sprite est tout d'abord constituée d'une image avec les différentes positions de notre animation que l'on va afficher suivant la direction du personnage, sa position, le contexte ...

L'objectif du menu est de faire avancer nos personnages pour faire découvrir le menu, comme ceci:

Pour réaliser le menu "Boys", ce n'est pas très compliqué:

On créé le HTML

<div class="item">
        <div id="boy" class="object"></div>
        <div id="boymask" class="mask"></div>
        <a href="#">Boys</a>
</div>

Auquel on applique du CSS pour mettre en forme notre menu:

body {
        background:#eeeeee;
}

#boy {
        width:16px;
        height:20px;
        background:url(notresprite.gif);
        background-position:53.8% 0%;
        border:none;
        position:absolute;
        z-index:10;
}

#boymask {
        background:#ffffff;
        width:120px;
        height:20px;
        position:absolute;
        z-index:1;
        margin-left:8px;
}


.item {
        background:#cccccc;
        width:128px;
        height:20px;
}

.item a {
        margin-left:20px;
}

Ensuite, ça se complique un peu, on passe à l'animation de notre personnage.

Dans un premier temps, on définit des constantes et la zone de "mapping" du menu:

var foot = [50,0,100,0];
var step = 12;
var sleeptime = 70;
var mapping = Array();
mapping["boy"] = { xr:20, xl:6.6, np:"0% 0%" };

px = function(val){
        return String(val)+"px";
}

mpx = function(val){
        if(val == "auto")
                return 0;
        return Number(String(val).substring(0,String(val).length – 2));
}

Puis on passe dans le gros de l'animation avec ce script jQuery:

$(document).ready(function(){

        $(".item").find(".mask").css("opacity","0.8");

        move = function(el,elmask){
                var newleft;
                if($(el).data("direction") == "R"){
                        if($(el).position().left >= $(el).parent().width()){
                                $(el).css("background-position", mapping[$(el).attr("id")].np);
                                $(el).data("isMoving",false);
                                return;
                        }
                        newleft = $(el).position().left + step;
                        newwidth = $(elmask).width() – step;
                        newwidth = (newwidth < 0)?0:newwidth;
                } else {
                        if($(el).position().left <= step){
                                $(el).css("background-position", mapping[$(el).attr("id")].np);
                                $(el).data("isMoving",false);
                                return;
                        }
                        newleft = $(el).position().left – step;
                        newwidth = $(elmask).width() + step;
                }
                if($(el).data("index") == 4)
                        $(el).data("index",0);
                var y = foot[($(el).data("index"))];
                $(el).data("index",($(el).data("index")+1))
                $(el).css("background-position",$(el).data("x")+"% "+y+"%").css("left",px(newleft));
                $(elmask).css("left",px(newleft)).css("width",px(newwidth));
                setTimeout(function(){ move(el,elmask); },sleeptime);
        }

        $(".item").each(function(){
                $(this).find(".object").data("isMoving",false);
        });

        $(".item").mouseenter(function(e){
                var obj = $(this).find(".object");
                eval($(this).find("a").attr("rel"))
                obj.data("x",mapping[obj.attr("id")].xr);
                obj.data("index",0);
                obj.data("direction","R");
                if(!obj.data("isMoving")){
                        obj.data("isMoving",true);
                        move(obj.get(0),$(this).find(".mask").get(0));
                }
        });

        $(".item").mouseleave(function(e){
                var obj = $(this).find(".object");
                eval($(this).find("a").attr("rel"))
                obj.data("x",mapping[obj.attr("id")].xl);
                obj.data("direction","L");
                if(!obj.data("isMoving")){
                        move(obj.get(0),$(this).find(".mask").get(0));
                }
        });
});

Et voilà le résultat: Démonstration sur le site officiel

Qu'est-ce que vous en pensez ?