Quelques explications sur l'effet spritetely

L'effet est réalisé grâce au script [Vous devez être inscrit et connecté pour voir ce lien]
Vous trouverez des infos sur ce site.

Ce script est basé sur 2 méthodes sprite () et pan () .
Qui animent  la propriété css background-image d'un élément.
La différence entre les deux est qu'une image «sprite» contient deux ou plusieurs «cadres» d'animation exemple le fantôme, alors qu'une image «panoramique» contient une image continue qui tourne à gauche ou à droite, puis se répète.exemple les arbres qui défilent dans la bannière du haut.

Vos éléments html doivent déjà avoir la taille correcte pour que l’image apparaisse, mais l'image d'arrière-plan sera généralement plus grande que l'élément html et les méthodes spritely repositionneront l'image d'arrière-plan dans l'élément html.

Exemple avec la chauve souris

L'animation est seulement constituée de 3 chauve souris. (6 pour la version reverse )
C'est ici que l'on voit la zone .spState(1) et .spState(2) que l'on va utiliser dans le script pour changer entre l'état a gauche a droite.


pour avoir


La partie script qui fait "voler" la chauve souris

Code:

$("#ghost2").sprite({fps:8, no_of_frames:3})
       .animate({opacity:'0.8'}, 5000) // ici vous pouvez changer l'opacité
       .spRandom({
         top:650, // Ici La distance de déplacement par rapport au Haut
         bottom:450, // Ici La distance de déplacement par rapport au Bas
         left:-100, // Ici La distance de déplacement par rapport au coté gauche
         right:1400, // Ici La distance de déplacement par rapport au coté droit
         speed:4000, // Ici la vitesse  diminuez la valeur pour augmenter la vitesse
         pause:2000  // le temps de pause

      }).isDraggable().activeOnClick().active();
     $('body').flyToTap();


Détaillé

Code:

$("#ghost2").sprite({fps:8, no_of_frames:3})

Ici on définit l'élément #ghost2 comme sprite avec 8 images par secondes et constitué de 3 images ou frame.*vous pouvez modifiez les FPS attention à ne pas mettre de valeurs trop élevé gourmande en ressource.

Code:

.animate({opacity:'0.8'}, 5000)

ici on règle l'opacité à 0.8 ( on peut mettre de 0.1 à 1 ) et le temps ici 5000 en millisecondes.

Code:

.spRandom

on initialise l'effet de déplacement aléatoire.

Code:

top:650, bottom:450, left:-100,right:1400,

Ici on va définir une zone ou la chauve souris va se déplacer en changeant les différentes valeurs.
Par exemple pour quelle vole en ligne sur une petite zone mettez top:150, bottom:152, elle restera en haut de page en ligne...

Code:

speed:4000,

 
Ici la vitesse  diminuez la valeur pour augmenter la vitesse en millisecondes.

Code:

pause:2000

le temps de pause en millisecondes.

Code:

.isDraggable().activeOnClick().active();

La méthode isDraggable () permettra à un sprite d'être déplacé vers n'importe quel point de l'écran.
La méthode active () rend ce sprite actif au lancement sinon un sprite avec activeOnClick () ne devient actif que lorsque vous cliquez dessus.

Code:

$('body').flyToTap();

Recherche un clic sur la page à partir de laquelle le sprite se déplace vers l'emplacement cliqué après la fin d'un déplacement en cours.

Partie concernant les boutons et changement de direction

Code:

$("#monster").click(function() {
  jQuery("#ghost2").animate({opacity:"0.7"}, 5000).spState(2);
});
$("#monster1").click(function() {
  jQuery("#ghost2").spState(1);
});
$("#monster2").click(function() {
  jQuery("#ghost2").spToggle();
});
$("#click").click(function() {
  $("#panel").toggle(1000);
});


Détaillé

Code:

$("#monster").click(function() {
  jQuery("#ghost2").animate({opacity:"0.7"}, 5000).spState(2);
});


Ici l'id #monster correspond au bouton RIGHT quand on clic l'id #ghost2 qui correspond à la chauve souris elle prend une opacité de 0.7 en 5000 millisecondes et change pour passer
à l'état 2   >>  .spState(2)

Pour changer la direction des sprites, vous devez utiliser une méthode différente, $ .spState (), et vous avez besoin d'une image différente, avec plusieurs lignes d'images, une ligne pour chaque état.





A suivre....