[FAQ] Comment créer un nouvel effet avec scriptaculous

**gwyohm** · 15/11/2008, 19h41

Voici une proposition de QR pour créer un effet perso avec scriptaculous

Section: framework javascript

[QR] Comment créer un nouvel effet avec scriptaculous
La définition d'un nouvel effet pour scriptaculous est très simple. Il suffit de créer une classe (au sens du framework prototype) qui hérite de Effect.Base et de définir 2 méthodes.

initialize(element [, options]) : le constructeur au sens du framework prototype
update(position) : la méthode appelée à chaque fois qu'on redessine l'effet. Le parametre position est un nombre entre 0 et 1 qui renseigne sur l'avancement de l'effet

En quelque sorte, Effect.Base est une classe abstraite.

En suivant cette façon de faire, vous conservez la possibilité d'utiliser les options des effets scriptaculous de base (telles que duration, afterFinish, de combiner vos effets...).

Exemple concret qui ferait bondir (de rage) un graphiste : Faire "exploser" un lien quand on clique dessus.
Si ca c'est pas too much !

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
Effect.Exploder = Class.create(Effect.Base, {
  // Constructeur ; on fait nos initialisations. Tout ce qu'on peut précalculer nous fait gagner du temps
  initialize : function(element) {
    // On récupère les options envoyées au constructeur ; si rien n'est envoyé, on utilise un objet vide.
    options = arguments[1] || {};
    // Eventuellement on peut définir des valeurs par défaut ici, les distances mini maxi à parcourir pour chaque lettre dans les 2 directions (abcisse et ordonnées) :
    options = Object.extend( {
      minMove: 100,
      maxMove: 400
    }, options);
    // On récupère l'élément sur lequel on veut faire l'effet
    this.element = $(element);
    // On utilise tagifyText pour isoler les lettres de l'élément dans des spans
    Effect.tagifyText(this.element);
    // On récupère ces spans dans une variable locale
    var _spans = this.element.select("span");
    // tagifyText donne des span en position 'relative' ; pour nous c'est plus simple en 'absolute' ... 
    // remarque : utiliser absolutize sur un invoke (sur plusieurs éléments) peut provoquer des effets bizarres. Je tacherai d'expliquer ca dans un autre post, quoi qu'il en soit, croyez moi il vaut mieux inverser le tableau avant...
    _spans.reverse().invoke("absolutize");
    // On va stocker des infos à propos de chaque lettre dans un tableau membre de la classe
    this.letters = new Array();
    // Pour chaque lettre (ou plutot span)
    for(var i=0; i< _spans.length; i++) {
      // On va stocker l'élément span, sa position de départ et sa position finale (à la fin de l'effet) :
      var currPos = _spans[i].positionedOffset();
      this.letters.push( {
        // l'element span
        element: _spans[i],
        // position de départ :
        startPos: currPos,
        // son déplacement total à la fin de l'effet:
        endPos: {
          top: Math.round(Math.random() * (options.maxMove - options.minMove)) + options.minMove * (Math.random() * 10 >= 5 ? 1 : -1),
          left: Math.round(Math.random() * (options.maxMove - options.minMove)) + options.minMove * (Math.random() * 10 >= 5 ? 1 : -1)
        }
      });
    }
    // On démarre l'effet
    this.start(options);
  },
  update : function(position) {
    // Pour chacune des lettres, on positionne par rapport à l'avancement :
    for(var i=0; i<this.letters.length; i++) {
      this.letters[i].element.setStyle( {
        top: (this.letters[i].startPos.top + Math.round(position * this.letters[i].endPos.top)) + "px",
        left: (this.letters[i].startPos.left + Math.round(position * this.letters[i].endPos.left)) + "px"
      } );
    }
  }
});

Ensuite le HTML ...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
    <!--
    Remarque ne pas oublier d'inclure :
     * prototype
     * scriptaculous
     * ... l'effet Exploder
    -->
    <a href="someUrl">le lien qui explose</a>
    <a href="someOtherUrl">un autre lien qui explose</a>
 
    <script type="text/javascript">
        $$("a").each(function(link) {
            link.observe("click", function(e) {
                // On stope le lien
                e.stop();
                // On lance l'effet
                new Effect.Exploder(e.element(), {
                    // A la fin de l'effet on renvoie vers le href du lien...
                    afterFinish:function(){
                        document.location.href = e.element().href;
                    }
                });
            })
        });
    </script>
</body>
</html>