> Effets
Les effets
Avec mootools vient les classes dérivées de "Fx". Plusieurs plugins à "Fx" sont déjà préinstallés comme: Style et Styles, slide, scroll,... Fx comprend des méthodes de base: start, stop et set.
start lance l'animation, stop l'arrête. Quant à set il permet d'aller directement à la fin de l'animation.
Chaque animation peut prendre au moins un jeux d'options:
- transition: c'est une équation de transition que vous pouvez voir dans la classe Fx.Transitions par defaut Fx.Transitions.Sine.easeInOut
- duration: la durée de l'animation en milisecondes
- unit: l'unité de mesure, par défaut le pixel (px) est utilisé.
- wait: true ou false pour définir si il faut attendre la fin de l'animation pour en commencer une nouvelle sur la même instance d'effet
- fps: le nombre de rafraichissement par seconde, par défaut 50;
Ensuite, l'animation est simple à mettre en place, regardez:
<div id="test">Mon texte</div>
<script type="text/javascript">
window.addEvent('domready',function(){
//faison un "fade-in":
//d'abord, on passe l'opacité à 0:
$('test').setStyle('opacity', 0);
//créons l'objet d'animation
var f = new Fx.Style ($('test'),'opacity', {duration: 900, wait: false});
//et on le lance
f.start(1);
})
</script>
L'objet passe son opacité de 0 à 1 pendant 900ms.