Retour

Slider

Bulles

Héro

Timer

Légende : Fonction, argument, variables, objet, fonction JQuery

  
                    /**
                    * moveYourHero : animate and moves hero according to parameters
                    * @param id
                    * @param speed
                    * @param dist
                    */
                    function moveYourHero(id, speed, dist) {
                    if (!dist) {
                    dist = ($(window).width() - (100));
                    }
                    $(id).removeClass("heroflipped");
                    var left = 0;
                    var leftCount = 0;
                    var turn = false;

                    setInterval(function () {
                    if (left == -480) {
                    left = 0;
                    }
                    left -= 60;
                    $(id).css('background-position', '0 ' + left + 'px');


                    if (leftCount > dist) {
                    turn = true;
                    }

                    if (turn) {
                    $(id).animate({"left": "-=" + speed * 0.1 + "px"}, 0);

                    $(id).addClass("heroflipped");
                    leftCount -= speed * 0.1;

                    if (leftCount <= 0) {
                    turn = false;
                    }
                    }
                    else {
                    $(id).removeClass("heroflipped");
                    $(id).animate({"left": "+=" + speed * 0.1 + "px"}, 0);
                    leftCount += speed * 0.1;
                    }
                    }, speed);

                    }

                    moveYourHero('#perso1', 50, $('window').width());

                
                

Le personnage est un sprite de 9 images collées les unes en dessous des autres. J'ai créé un bloc de la largeur/hauteur adéquate, j'ai mis le sprite en background, puis tous les pas de temps, j'ai décalé le background pour créer l'animation. Il suffit de le réinitialiser arrivé au bout pour boucler.
Le déplacement du personnage s'effectue en déplaçant la position du bloc, tous les pas de temps (grâce à la fonction setInterval).
La fonction prend en paramètres l'id du bloc (il suffit donc de créer une div où l'on souhaite mettre le personnage dans notre page HTML). La vitesse d'animation du personnage et la distance à chaque pas de temps sont aussi paramétrables.