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"
} );
}
}
}); |
Partager