Les effets visuels de script.aculo.us

Didier Mouronval

Cette série d'articles a pour but de vous faire découvrir les différentes fonctions du framework script.aculo.us.

Les effets visuels de script.aculo.us sont répartis en deux catégories, les effets noyau et les effets combinés.
Les effets combinés sont en fait une combinaison d'effets de base préformatés.
Bien comprendre cette notion vous sera très utile lorsque vous voudrez créer vos propres effets personnalisés.

Commentez ♪

- Titre : Les effets visuels de script.aculo.us

- Auteur : Didier Mouronval

- Parution : 17 décembre 2008

- Licence :

Sommaire

- Les effets noyau

- Les options communes

- Présentation et options spécifiques des effets noyau

- L'effet Opacity

- L'effet Scale

- L'effet Morph

- L'effet Move

- L'effet Highlight

- L'effet ScrollTo

- L'effet Tween

- Les effets de synchronisation

- L'effet Transitions

- L'effet Parallel

- L'effet multiple

- Le paramètre queue

- Raccourcis

- Les effets combinés

- Effet Appear / Fade

- Effet Puff

- Effet DropOut

- Effet Shake

- Effet SwitchOff

- Effets BlindUp / BlindDown

- Effets SlideUp / SlideDown

- Effet Pulsate

- Effets Shrink / Grow

- Effet Fold

- Effet toggle

- En conclusion

- Articles de la série

- Remerciements

Les effets noyau

Les effets noyau correspondent à des effets de base, certains utiles, d'autres moins, mais qui seront indispensables aux effets combinés qui constituent une vraie richesse pour un langage comme JavaScript aussi peu porté sur le graphisme !

Il existe 7 effets noyau : Opacity, Scale, Morph, Move, Highlight, ScrollTo et Tween que nous allons détailler ici.
Il est à noter qu'il existe d'autres effets faisant partie des « core effects » de la bibliothèque, mais j'ai préféré les détailler à part dans les effets de synchronisation, car ils n'agissent pas de façon visuelle.

La syntaxe générale pour appeler un effet est la suivante :

new Effect.NomEffet('element', parametres[, {options}]);

Explicatif :

- NomEffet : le nom de l'effet. (Les choses qui vont sans dire vont toujours mieux en les disant !)

- 'element' : l'id de l'élément sur lequel va s'appliquer l'effet. Vous noterez qu'il n'est pas nécessaire d'utiliser la syntaxe d'élément étendu de Prototype ($('element')), script.aculo.us se charge de cela lui-même !

- parametres : les paramètres requis pour l'effet.

- {options} : au format JSON (JavaScript Object Notation), les paramètres facultatifs de l'effet.

Les options communes

Attention, il s'agit bien des options et non des paramètres !

Option

Description

Défaut

duration

La durée de l'effet en secondes

1.0

fps

Le nombre de rafraichissements par seconde

25

transition

L'option transition est en fait un effet à part entière que nous aborderons plus loin

sinoidal

from

Valeur initiale de la transition, entre 0.0 et 1.0

0.0

to

Valeur finale de la transition, entre 0.0 et 1.0

1.0

sync

Booléen utilisé par l'effet Parallel. Synchronise ou non les effets

true

queue

Position dans une file d'attente. Là encore, un effet à part entière que nous verrons plus loin.

delay

Le délai en secondes avant le lancement de l'effet.

0.0

Il existe de même des événements spécifiques et des variables accessibles pendant le déroulement de l'effet :

Événement

Description

beforeStart

Appelé avant de commencer l'effet.

beforeUpdate

Appelé avant la mise à jour du rafraichissement.

afterUpdate

Appelé après la mise à jour du rafraichissement.

afterFinish

Appelé quand l'effet est terminé.

Variable

Description

effect.element

L'élément sur lequel est appliqué l'effet.

effect.options

Les options de l'effet.

effect.currentFrame

Le numéro de l'image actuelle.

effect.startOn, effect.finishOn

Le moment (en ms) de début et de fin de l'effet.

effect.effects[]

Pour les effets Parallel, le tableau des effets invoqués.

effect.cancel()

Stopper l'effet.

Présentation et options spécifiques des effets noyau

L'effet Opacity

Cet effet fait varier l'opacité d'un élément du paramètre from au paramètre to.

Syntaxe

new Effect.Opacity('id_element'[, options]);
new Effect.Opacity(element[, options]);

Avec :

- 'id_element' ou element faisant référence à l'élément sur lequel on souhaite appliquer l'effet.

- Paramètres obligatoires : from et to.

Les objets Prototype (créés avec la syntaxe $('id_element')) sont appelés des objets étendus dans la mesure où Prototype leur donne des propriétés internes.

Il est intéressant de noter que vous n'avez pas besoin de mettre en premier paramètre un objet Prototype étendu, car cette action est effectuée automatiquement par script.aculo.us pour tous les effets.

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Opacity</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div id="conteneur" style="margin: 50px 0 0 50px;width: 100px;height:100px; background-color:gray;">
</div>
<div>
<input type="button" value="Afficher (1 seconde)"
onclick="new Effect.Opacity('conteneur', { from: 0, to: 1 });" />
<input type="button" value="Effacer (2 secondes)"
onclick="new Effect.Opacity('conteneur', { from: 1, to: 0, duration: 2 });" />
<br /><input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Attention ! Dans les versions antérieures de script.aculo.us, l'élément auquel s'applique l'effet devait avoir un layout pour pouvoir fonctionner sous IE. Même si ce n'est plus le cas, pensez-y si vous utilisez une version ancienne du script.

Source de effects.js

if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
this.element.setStyle({zoom: 1});

Affecter un 'layout' à un élément sous IE.

- Attribuer des propriétés CSS « height » ou « width » (ne fonctionne pas sur les éléments de type inline si IE n'est pas en quircksmode).

- Mettre la propriété « display » à inline-block.

- Mettre la propriété « position » à absolute.

- Mettre la propriété « writingMode » à tb-rl.

- Mettre la propriété « contentEditable » à true.

L'effet Scale

Adapte progressivement la taille d'un élément à un pourcentage donné.

Syntaxe

new Effect.Scale('id_element', pourcentage, [options]);
new Effect.Scale(element, pourcentage, [options]);

Avec :

- 'id_element' ou element faisant référence à l'élément sur lequel on souhaite appliquer l'effet.

- pourcentage : valeur numérique correspondant à l'agrandissement / rétrécissement de l'élément cible.

Cet effet possède des options spécifiques :

Options spécifiques

Description

Défaut

scaleX

L'effet doit être appliqué horizontalement

true

scaleY

L'effet doit être appliqué verticalement

true

scaleContent

L'effet doit être aussi appliqué au contenu

true

scaleFromCenter

L'effet doit être appliqué depuis le centre de l'élément

false

scaleMode

'box' n'applique l'effet qu'à la partie visible de l'élément.
'contents' applique l'effet à l'ensemble de l'élément, y compris les parties cachées.
hash (format JSON) précisant la taille de départ (exemple : scaleMode: {originalHeight: y, originalWidth: x } (originalHeight et originalWidth sont des valeurs numériques).

'box'

scaleFrom

Pourcentage de début de l'effet

100.0

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Scale</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div style="margin: 50px 10px 0 50px;"><span id="conteneur">Div à agrandir / réduire</span>
</div>
<div>
<input type="button" value="Agrandir (x2)" onclick="new Effect.Scale('conteneur', 200);" />
<input type="button" value="Diminuer (x0.75)" onclick="new Effect.Scale('conteneur', 75);" />
<br /><input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

L'effet Morph

Change les propriétés CSS d'un élément.

Syntaxe chaîne

new Effect.Morph('id_element',{style: 'propriete-css1: valeur1; propriete-css: valeur2;'[, options]});

Syntaxe hash

new Effect.Morph('id_element',{style: {proprieteJavascript1:'valeur1', proprieteJavascript2: 'valeur2'[, options]});

Avec :

- 'id_element' ou element faisant référence à l'élément sur lequel on souhaite appliquer l'effet.

- style a pour valeur une chaîne construite à la manière de l'attribut HTML « style » ou un hash à la manière de l'objet style de JavaScript. 'valeur' correspondant à la valeur finale souhaitée.

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Morph</title>
<style type="text/css">
<!--
#conteneur{
margin: 50px 0 10px 50px;
width: 100px;
height: 100px;
color:#000;
background-color:#FFF;
border: 1px solid silver;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div id="conteneur">Une div</div>
<div>
<input type="button" value="Blanc -> Noir"
onclick="new Effect.Morph('conteneur', {style: 'background-color:#000; color:#FFF; width: 300px'});" />
// Notation chaîne / CSS
<input type="button" value="Noir -> Blanc"
onclick="new Effect.Morph('conteneur', {style: {backgroundColor: '#FFF', color: '#000', width: '100px'},
duration: 0.7});" />
// Notation hash / JavaScript
<br /><input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Cet effet ne s'applique qu'aux propriétés CSS dont la valeur est de type dimension ou couleur.

Cet effet est utilisable, quelle que soit la façon dont la règle CSS a été définie (CSS externe, interne ou attribut style).

Seul Internet Explorer n'accepte pas les couleurs définies par leur nom. Il est donc préférable d'utiliser la notation hexadécimale pour la compatibilité !

L'effet Move

Cet effet déplace un élément dans la page.

Syntaxe mode absolute

new Effect.Move('id_element', { x: 0, y: 0, mode: 'absolute' });

Syntaxe mode relative

new Effect.Move('id_element', { x: -20, y: 30, mode: 'relative' });

Avec

- 'id_element' ou element faisant référence à l'élément sur lequel on souhaite appliquer l'effet.

- x et y : la position à laquelle finira l'effet (mode absolute) ou le nombre de pixels dont doit être déplacé l'élément (mode relative).

- mode : 'absolute' ou 'relative' (valeur par défaut), la position finale, calculée par rapport à la page ou à la position initiale de l'élément.

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Move</title>
<style type="text/css">
<!--
#conteneur{
margin: 50px 0 10px 50px;
width: 200px;
height: 100px;
color: #000;
background-color: silver;
cursor: pointer;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
<!--// [CDATA[
var posX = 200;
var posY = 100;
// ]] -->
</script>
</head>

<body>
<div id="conteneur" onclick="new Effect.Move('conteneur', { x: 0, y: 0, mode: 'absolute', duration: 0.5 });">
Div à déplacer.<br />Cliquez dessus pour revenir à la position initiale
</div>
<div>
<label for="posX">Déplacement en x : </label>
<select id="posX" onchange="posX=parseInt(this.value,10)">
<option value="-100">-100</option>
<option value="-50">-50</option>
<option value="0">0</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200" selected="selected">200</option>
</select>
<label for="posY">Déplacement en y : </label>
<select id="posY" onchange="posY=parseInt(this.value,10)">
<option value="-100">-100</option>
<option value="-50">-50</option>
<option value="0">0</option>
<option value="50">50</option>
<option value="100" selected="selected">100</option>
<option value="200">200</option>
</select><br />
<input type="button" value="Déplacer" onclick="new Effect.Move('conteneur', { x: posX, y: posY });" />
<input type="button" value="Revenir" onclick="new Effect.Move('conteneur',
{ x: 0, y: 0, mode: 'absolute', duration: 0.5 });" />
<br /><input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Dans des versions précédentes de script.aculo.us, l'effet de déplacement (Move ou MoveBy selon les versions) nécessitait de positionner l'élément. On trouve toujours cette mention dans certaines documentations, mais ce n'est plus le cas. Pour preuve, dans l'exemple donné, la div 'conteneur' n'est pas positionnée, mais l'effet fonctionne tout de même sous IE !

L'effet Highlight

Cet effet permet de modifier la couleur de fond d'un élément.
Il est particulièrement utile pour attirer l'attention sur un changement de contenu réalisé en AJAX.

Syntaxe

new Effect.Highlight('id_element'[, options]);

Options spécifiques

Description

Défaut

startcolor

La couleur de fond sur laquelle débutera l'effet

'#FFFF99'

endcolor

La couleur de fond sur laquelle finira l'effet

Propriété background-color
ou '#FFFFFF'

restorecolor

La couleur de fond affectée à l'élément après la fin de l'effet

Indéfinie

Attention !

- Si restorecolor n'est pas définie, l'effet tentera de lui donner la valeur de la propriété background-color. Ceci n'est possible sur tous les navigateurs que si celle-ci est affectée en utilisant la syntaxe rgb (ex. : rgb(255, 255, 255)).

- Pour les options startcolor et endcolor, préférez les valeurs hexadécimales complètes (#FFFFFF) plutôt que courtes (#FFF).

- Le new est obligatoire pour cet effet, sinon il ne fonctionnera pas !

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Highlight</title>
<style type="text/css">
<!--
div{
margin: 40px;
float: left;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div>
<h3 id="conteneur1">Valeurs de l'effet par défaut</h3>
<input type="button" value="Tester" onclick="new Effect.Highlight('conteneur1');" />
</div>
<div>
<h3 id="conteneur2">startcolor : '#FF0000'</h3>
<input type="button" value="Tester" onclick="new Effect.Highlight('conteneur2',
{startcolor: '#FF0000'});" />
</div>
<div>
<h3 id="conteneur3">endcolor : '#C0C0C0'</h3>
<input type="button" value="Tester" onclick="new Effect.Highlight('conteneur3',
{startcolor: '#FFFFFF', endcolor: '#C0C0C0'});" />
</div>
<div>
<h3 id="conteneur4">restorecolor : 'rgb(192, 192, 192)'</h3>
<input type="button" value="Tester" onclick="new Effect.Highlight('conteneur4',
{restorecolor: 'rgb(192, 192, 192)'});" />
<input type="button" value="Restaurer" onclick="$('conteneur4').style.backgroundColor=''" />
</div>
<div style="clear: both">
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

L'effet ScrollTo

Cet effet permet d'atteindre un élément.

Syntaxe

new Effect.ScrollTo('id_element'[, options]);

'id_element' est l'élément vers lequel on veut aller.

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet ScrollTo</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script>
<!--
function compte(){
for(var i=0;i<200;i++){
$('conteneur').innerHTML+='<br />'+i;
}
}
-->
</script>
</head>

<body onload="compte()">
<div id="conteneur">
<span id="haut">Haut de la page</span>
<input type="button" value="Descendre" onclick="new Effect.ScrollTo('bas');" />
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
<div>
<input type="button" value="Remonter rapidement" onclick="new Effect.ScrollTo('haut', {duration: 0.5});" />
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
<div id="bas">Tout en bas !</div>
</body>
</html>

Attention, les versions précédentes de script.aculo.us présentaient différents bugs avec cet effet :

- La position finale était parfois mal calculée.

- Sur Opéra, il était impossible d'atteindre des éléments au-delà du bas de l'écran.

Ces bugs ont été rectifiés dans les versions 1.6.0.3 de Prototype et 1.8.2 de script.aculo.us.

L'effet Tween

Cet effet permet de faire varier la valeur numérique d'une propriété ou du paramètre d'une fonction.

Syntaxe

new Effect.Tween(element, debut, fin[, options], Nom_de_propriete);
new Effect.Tween('id_element', debut, fin[, options], fonction);

Avec :

- element ou 'id_element' : l'élément sur lequel va s'appliquer l'effet.

- debut : la valeur initiale de la propriété ou du compteur.

- fin : la valeur finale de la propriété ou du compteur.

- options : les options habituelles communes aux effets.

- Nom_de_propriete : la propriété de l'élément que l'on souhaite faire varier.

- fonction : une fonction appelée à chaque changement de valeur.

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Tween</title>
<style type="text/css">
<!--
#conteneur2{
background-color : blue;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Effet dans la barre de titre.</h3>
<input type="button" value="Tester" onclick="new Effect.Tween(document, 0, 100, {duration: 5.0}, 'title')" />
</div>
<div class="exemple">
<h3>Apparition d'une image.</h3>
<div>Propriétés width et height de l'objet image.<br />
<img id="conteneur1" width="0" height="0" src="./imgs/exemple.jpg" alt="Fond" />
</div>
<input type="button" value="Apparaitre" onclick="new Effect.Tween('conteneur1', 0, 400, 'width');
new Effect.Tween('conteneur1', 0, 300, 'height');" />
<input type="button" value="Disparaitre" onclick="new Effect.Tween('conteneur1', 400, 0, 'width');
new Effect.Tween('conteneur1', 300, 0, 'height');" />
</div>
<div class="exemple">
<h3>Apparition d'une div.</h3>
<div id="conteneur2"></div><br />
<input type="button" value="Apparaitre" onclick="new Effect.Tween('conteneur2', 0, 300,
function(p){this.style.height=p/2+'px';this.style.width=p+'px'});" />
<input type="button" value="Disparaitre" onclick="new Effect.Tween('conteneur2', 300, 0,
function(p){this.style.height=p/2+'px';this.style.width=p+'px'});" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Les effets de synchronisation

Il n'existe pas de référence à des effets de synchronisation dans la librairie script.aculo.us ni dans la documentation officielle. Cependant, j'ai choisi de réunir dans cette rubrique une série d'effets provenant soit des effets noyaux soit de la classe Effect.Base.
Il s'agit d'une collection d'effets dont le rôle est de coordonner les autres effets entre eux.
Les effets que nous allons voir dans cette rubrique sont les suivants : Transitions, Parallel, multiple, Queue / Queues / ScopedQueue (que j'ai réunis, car ils participent à la même fonctionnalité) et Methods.

L'effet Transitions

L'effet Transitions n'est en réalité qu'une collection de formules mathématiques qui vont permettre de modifier le comportement d'un effet dans le temps.
En interne, un effet n'est pas une simple incrémentation linéaire de valeurs. Dans les exemples proposés précédemment, la transition par défaut (sinoidal) a été appliquée et vous pouvez constater que l'effet accélère au début et ralenti à la fin.

Il existe neuf types de transitions :

Transition

Description

Modélisation mathématique

linear

Incrémentation linéaire des valeurs de l'effet.

i

sinoidal

Accélération progressive de l'animation.

-cos(i?/2)+0.5

reverse

Effet inversé.

1-i

flicker

Effet de tremblement accentué sur la fin de l'animation.

max(((-cos(i?)/4)+0.75)+rand()/4, 1)

wobble

Effet de secousses.

-cos(10i?)/2+0.5

pulse

L'effet est accéléré 5 fois et répété 5 fois.

-cos((pos*((pulses||5)-0.5)*2)*?)/2+0.5
pulses est le nombre de pulsations (5 par défaut)

spring

Effet de stabilisation sur la position finale.

1-cos(4.5i*?)*e(-6i)

none

L'effet reste à sa position initiale.

0

full

L'effet va à sa position finale immédiatement.

1

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Transitions</title><style type="text/css">
<!--
#conteneur1{
background-color : blue;
width: 150px;
height: 100px;
margin: 20px;
}
input{
margin: 10px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<h2>Test de l'effet Scale</h2>
<h3 style="margin: 10px 0 10px 50px;"><span id="conteneur">Elément à agrandir / réduire</span></h3>
<div>
<input type="button" value="Agrandir" onclick="new Effect.Scale('conteneur', 200,
{transition: Effect.Transitions[$('transition').value]});" />
<input type="button" value="Diminuer" onclick="new Effect.Scale('conteneur', 50,
{transition: Effect.Transitions[$('transition').value]});" />
</div>
<h2>Test de l'effet Move</h2>
<div id="conteneur1"></div>
<div>
<input type="button" value="Tester" onclick="new Effect.Move('conteneur1',
{x: 200, y: 0, mode: 'relative', transition: Effect.Transitions[$('transition').value]});" />
<input type="button" value="Retour" onclick="$('conteneur1').style.left=''" />
</div>
<div>
Choisissez une transition :
<select id="transition">
<option value="linear">linear</option>
<option value="sinoidal">sinoidal</option>
<option value="reverse">reverse</option>
<option value="flicker">flicker</option>
<option value="wobble">wobble</option>
<option value="pulse">pulse</option>
<option value="spring">spring</option>
<option value="none">none</option>
<option value="full">full</option>
</select>
puis testez un effet.
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

L'effet Parallel

Cet effet est utilisé pour lancer plusieurs effets.

Syntaxe

new Effect.Parallel([tableau effets][, options]);

Avec :

- tableau effets : un tableau contenant les différents effets à lancer, dans leur syntaxe usuelle.

Option spécifique

Description

Défaut

sync

Valeur booléenne, permet de lancer les effets simultanément. À indiquer dans les options de chaque effet.

true

Si l'option sync est false, l'effet en question sera lancé dès son invocation, ce qui peut causer un léger décalage.

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Parallel</title><style type="text/css">
<!--
#conteneur{
background-color : blue;
width: 150px;
height: 100px;
margin: 20px;
}
input{
margin: 10px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<h2>Test de l'effet Parallel</h2>
<div id="conteneur"></div>
<div>
<input type="button" value="Tester" onclick="new Effect.Parallel([
new Effect.Move('conteneur', {sync: true, x: 400, y: 0, mode: 'relative' }),
new Effect.Opacity('conteneur', {sync: true, from: 1, to: 0 }),
new Effect.Morph('conteneur', {style: {width: '0px', height: '0px'}, sync: true})
], {duration: 1.5});" />
<input type="button" value="Retour"
onclick="$('conteneur').setStyle({top: '', left: '', opacity: 1, width: '', height: ''});" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

L'effet multiple

Cet effet permet d'appliquer un effet à une collection d'éléments.

Syntaxe

Effect.multiple('id_element', Effet[, options]);    // Voir note ci-dessous.
Effect.multiple(['id_1', 'id_2', ...], Effet[, options]);
Effect.multiple(fonction, Effet[, options]);

Avec :

- 'id_element' : Si vous précisez un id d'élément, l'effet s'appliquera à l'ensemble des childNodes cet élément.

- ['id_1', 'id_2'…] : Si vous précisez un tableau d'id, l'effet s'appliquera à l'ensemble des éléments correspondants.

- fonction : Si vous précisez une fonction (typiquement $$ de Prototype), l'effet s'appliquera à l'ensemble des éléments retournés par cette fonction.

- Effet : l'effet à appliquer aux éléments sélectionnés.

Attention : lorsque vous précisez juste un id, multiple récupèrera une collection d'éléments via la méthode DOM childNodes (méthode retournant l'ensemble des nœuds enfants d'un élément du DOM). Du fait de la différence d'interprétation du DOM par les navigateurs, cette syntaxe est particulièrement déconseillée, car elle retournera quasiment systématiquement des erreurs liées à la présence de nœuds vides dans la collection.

Une astuce pour parer à ce désagrément : dans le code source du fichier effects.js, vous pouvez repérer la fonction multiple et modifier l'appel à la méthode childNodes par childElements() de Prototype. Toutefois, avec cette astuce, vous ne récupèrerez pas les nœuds texte !

Option spécifique

Description

Défaut

speed

Le délai avant le démarrage de chaque effet.

0.1

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet multiple</title><style type="text/css">
<!--
.conteneur{
background-color : blue;
width: 100px;
height: 20px;
margin: 20px;
}
input{
margin: 10px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<h2>Test de l'effet multiple</h2>
<h3>Test sur l'effet Move :</h3>
<div class="conteneur"></div>
<div class="conteneur"></div>
<div class="conteneur"></div>
<div class="conteneur"></div>
<div>
<input type="button" value="Tester" onclick="new Effect.multiple($$('.conteneur'),
Effect.Move, {x: 400, y: 0, mode: 'relative' });" />
<input type="button" value="Retour" onclick="new Effect.multiple($$('.conteneur'),
Effect.Move, {x: 0, mode: 'absolute', duration: 0.5, speed: 0.0  });" />
</div>
<div>
<h3>Test sur l'effet Opacity :</h3>
<ul id="groupe">
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li>Quatrième</li>
</ul>
<input type="button" value="Tester" onclick="new Effect.multiple($('groupe').select('li'),
Effect.Opacity, {from: 1.0, to: 0.0 });" />
<input type="button" value="Retour" onclick="new Effect.multiple($('groupe').select('li'),
Effect.Opacity, {from: 0.0, to: 1.0, duration: 0.5, speed: 0.0 });" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Le paramètre queue

Le paramètre queue englobe en fait trois effets distincts : Queue, Queues et ScopedQueue.
Ces effets ne sont pas très utiles en soi, nous allons donc voir en détail leur comportement dans l'utilisation du paramètre queue. Celui-ci permet de gérer des piles d'effets de façon relativement complexe.

Syntaxe

queue: {position: 'position', scope: 'file', limit: nombre}

À placer dans les paramètres de l'effet.

Paramètre

Description

position

front : place l'effet au début de la file.
end : place l'effet à la fin de la file.
with-last : fera démarrer l'effet en même temps que le dernier de la file.

scope

Par défaut 'global', permet de définir différentes files d'effets.

limit

Le nombre maximal d'effets dans la file donnée. Ceux en surnombre seront ignorés.

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Queue</title>
<style type="text/css">
<!--
#conteneur{
background-color : #0000FF;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
<!--
function deplacement(){
new Effect.Move('conteneur',
{x: 400, mode: 'relative', queue: {position: 'front', scope: 'deplace'}});
new Effect.Move('conteneur',
{y: 400, mode: 'relative', duration: 2, queue: {position: 'end', scope: 'deplace'}});
new Effect.Move('conteneur',
{x: -400, y: -400, mode: 'relative', queue: {position: 'end', scope: 'deplace'}});
new Effect.Morph('conteneur',
{style: {width: '300px', backgroundColor: '#000000'}, queue: {position: 'front', scope: 'change'}});
new Effect.Parallel([
new Effect.Morph('conteneur', {style: {width: '200px'}, sync: true}),
new Effect.Opacity('conteneur', {from: 1, to: 0.5, sync: true})],
{duration: 2, queue: {position: 'end', scope: 'change'}});
new Effect.Morph('conteneur',
{style: {backgroundColor: '#0000FF'}, queue: {position: 'end', scope: 'change'}});
new Effect.Opacity('conteneur',
{from: 0.5, to: 1.0, queue: {position: 'with-last', scope: 'change'}});
}
-->
</script>
</head>

<body>
<div class="exemple">
<h3>Apparition d'une div.</h3>
<div id="conteneur"></div>
<input type="button" value="Animer" onclick="deplacement();" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Raccourcis

script.aculo.us propose aussi un ensemble de raccourcis pour la plupart des effets.

Syntaxe

$('element').effet({options});

Avec :

- $('element') : l'élément étendu (au sens de Prototype) sur lequel appliquer l'effet.

- effet : nom de l'effet à appliquer.

- {options} : le hash des options obligatoires et facultatives à appliquer.

Effet

Exemple

visualEffect

$('element').visualEffect(Effet, {options});

morph

$('element').morph({propriete1: valeur1, propriete2: valeur2…}, {options});

fade

$('element').fade({options});

appear

$('element').appear({options});

grow

$('element').grow({options});

shrink

$('element').shrink({options});

fold

$('element').fold({options});

blindUp

$('element').blindUp({options});

blindDown

$('element').blindDown({options});

slideUp

$('element').slideUp({options});

slideDown

$('element').slideDown({options});

pulsate

$('element').pulsate({options});

shake

$('element').shake({options});

puff

$('element').puff({options});

squish

$('element').squish({options});

switchOff

$('element').switchOff({options});

dropOut

$('element').dropOut({options});

highlight

$('element').highlight({options});

Vous remarquerez que les noms des effets ne prennent dans ce cas pas de majuscule initiale.

Étant donnée la nature de cette syntaxe dont le but est de simplifier les appels des effets, nous nous abstiendrons de donner un exemple.

Les effets combinés

Les effets noyaux sont particulièrement utiles pour permettre de créer des effets plus complexes appelés effets combinés.
Il en existe un certain nombre prédéfinis, cependant, ceux-ci ne sont pas à considérer comme des finalités, mais plus comme des bases pour vous aider à créer vos propres effets en fonction de vos besoins.

Vous avez probablement remarqué que les effets noyaux possèdent des paramètres et des options complexes.
Rassurez-vous, cette complexité permet d'avoir une syntaxe particulièrement allégée pour les effets combinés qui sont souvent ceux que l'on souhaite utiliser dans nos applications.
Cependant, la connaissance des effets noyau vous permettra par la suite de créer vos propres effets combinés, éventuellement en vous inspirant des exemples proposés par script.aculo.us.

Effet Appear / Fade

Les effets Appear et Fade permettent de faire apparaitre ou disparaitre un élément en modifiant son opacité et en ajustant sa propriété display.

Pour que cet effet fonctionne, la propriété CSS display ne doit pas être fixée dans une feuille de style externe (fichier .css) ou interne (balise <style>), mais si nécessaire, via l'attribut style de la balise, comme dans l'exemple donné.

Option

Description

Défaut

from

Valeur de l'opacité au début de l'effet (0.0 à 1.0)

Appear : 0.0
Fade : 1.0

to

Valeur de l'opacité à la fin de l'effet.

Appear : 1.0
Fade : 0.0

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Appear / Fade</title>
<style type="text/css">
<!--
#conteneur{
background-color : blue;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Apparition / Disparition d'une div.</h3>
<div id="conteneur" style="display:none"></div>
<input type="button" value="Apparaitre" onclick="new Effect.Appear('conteneur');" />
<input type="button" value="Disparaitre" onclick="$('conteneur').fade({duration: 2});" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Effet Puff

Effet « bulle de savon » sur un élément : agrandissement et transparence.

Syntaxe

new Effect.Puff('element'[, options]);
$('element').puff({options});

Cet effet fonctionne pour les éléments de type block sauf les tables !

Comme tous les effets gérant la transparence, l'effet Puff gère les options from et to.

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Puff</title>
<style type="text/css">
<!--
#conteneur{
background-color : blue;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Effet Puff.</h3>
<div id="conteneur"></div>
<input type="button" value="Exemple 1" onclick="new Effect.Puff('conteneur',
{duration: 2, afterFinish: function(){$('conteneur').style.display=''}});" />
<input type="button" value="Exemple 2" onclick="$('conteneur').puff({transition:
Effect.Transitions.spring, afterFinish: function(){$('conteneur').style.display=''}});" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Effet DropOut

L'élément tombe en disparaissant.

Syntaxe

new Effect.DropOut('element'[, options]);
$('element').dropOut({options});

Cet effet fonctionne pour les éléments de type block sauf les tables !

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet DropOut</title>
<style type="text/css">
<!--
#conteneur{
background-color : blue;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Effet DropOut.</h3>
<div id="conteneur"></div>
<input type="button" value="DropOut" onclick="new Effect.DropOut('conteneur');" />
<input type="button" value="Rétablir" onclick="$('conteneur').style.display='';" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Effet Shake

Effet de secousses latérales.

Option

Description

Défaut

distance

L'amplitude du mouvement, en pixels.

20

Syntaxe

new Effect.Shake('element'[, options]);
$('element').shake({options});

Cet effet fonctionne pour les éléments de type block sauf les tables !

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Shake</title>
<style type="text/css">
<!--
#conteneur{
background-color : blue;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px 100px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Effet Shake.</h3>
<div id="conteneur"></div>
<input type="button" value="Valeurs par défaut" onclick="new Effect.Shake('conteneur');" />
<input type="button" value="Amplitude 60px" onclick="$('conteneur').shake({distance: 60});" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Effet SwitchOff

Léger clignotement puis disparition de l'élément par une ligne centrale.

Syntaxe

new Effect.SwitchOff('element'[, options]);
$('element').switchOff({options});

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet SwitchOff</title>
<style type="text/css">
<!--
#conteneur{
background-color : blue;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Effet SwitchOff.</h3>
<div id="conteneur"></div>
<input type="button" value="SwitchOff" onclick="new Effect.SwitchOff('conteneur');" />
<input type="button" value="Rétablir" onclick="$('conteneur').style.display='';" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Cet effet fonctionne pour les éléments de type block sauf les tables !

Effets BlindUp / BlindDown

Ces effets font disparaitre ou apparaitre un élément avec un effet de glissement.

Syntaxe

new Effect.BlindUp('element'[, options]);
$('element').blindUp({options});
new Effect.BlindDown('element'[, options]);
$('element').blindDown({options});

Option

Description

Défaut

scaleX

Booléen. Détermine si l'effet s'applique de façon horizontale.

false

scaleY

Booléen. Détermine si l'effet s'applique verticalement.

true

scaleContent

Booléen. Détermine si l'effet s'applique au contenu.

false

scaleFromCenter

Booléen. Le positionnement est calé sur le centre de l'élément.

false

scaleMode

'box', 'content' ou objet {originalWidth: largeur_initiale, originalHeight: hauteur_initiale}

'box'

scaleFrom

Entier. Pourcentage définissant la taille initiale de l'élément

100

scaleTo

Entier. Pourcentage définissant la taille finale de l'élément

0

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet BlindUp / BlindDown</title>
<style type="text/css">
<!--
#conteneur{
background-color : silver;
text-align : center;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Effets Blind.</h3>
<div id="conteneur">Un peu de texte<br />pour voir l'action de l'effet<br />sur le contenu.</div>
<input type="button" value="BlindDown" onclick="new Effect.BlindDown('conteneur', {scaleX: true});" />
<input type="button" value="BlindUp" onclick="$('conteneur').blindUp({duration: 2, scaleContent: true});" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Cet effet fonctionne pour les éléments de type block sauf les tables !

Si vous désirez que l'élément soit en display: none par défaut, il faut préciser le style dans l'attribut style de la balise et non dans les feuilles CSS.

Effets SlideUp / SlideDown

Similaire aux effets BlindUp et BlindDown sauf que le contenu suit l'effet.

Syntaxe

new Effect.SlideUp('element'[, options]);
$('element').slideUp({options});
new Effect.SlideDown('element'[, options]);
$('element').slideDown({options});

Attention, le contenu de l'élément doit être inséré dans une div supplémentaire pour que l'effet s'applique correctement ! (Voir le code de l'exemple).

Option

Description

Défaut

scaleX

Booléen. Détermine si l'effet s'applique de façon horizontale.

false

scaleY

Booléen. Détermine si l'effet s'applique verticalement.

true

scaleContent

Booléen. Détermine si l'effet s'applique au contenu.

false

scaleFromCenter

Booléen. Le positionnement est calé sur le centre de l'élément.

false

scaleMode

'box', 'content' ou objet {originalWidth: largeur_initiale, originalHeight: hauteur_initiale}

'box'

scaleFrom

Entier. Pourcentage définissant la taille initiale de l'élément

100

scaleTo

Entier. Pourcentage définissant la taille finale de l'élément

0

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet SlideUp / SlideDown</title>
<style type="text/css">
<!--
#conteneur{
background-color : silver;
text-align : center;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Effets Slide.</h3>
<div id="conteneur">
<div>Un peu de texte<br />pour voir l'action de l'effet<br />sur le contenu.</div>
</div>
<input type="button" value="SlideDown" onclick="new Effect.SlideDown('conteneur');" />
<input type="button" value="SlideUp" onclick="$('conteneur').slideUp();" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Cet effet fonctionne pour les éléments de type block sauf les tables !

Sous IE6, les éléments block flottants doivent être positionnés en relative.

Si vous désirez que l'élément soit en display: none par défaut, il faut préciser le style dans l'attribut style de la balise et non dans les feuilles CSS.

Effet Pulsate

Cet effet produit des apparitions successives de l'élément comme s'il s'agissait de pulsations.

Syntaxe

new Effect.Pulsate('element'[, options]);
$('element').pulsate({options});

Option

Description

Défaut

duration

Durée en secondes de l'effet, cette option est commune à tous les effets, mais comporte ici une valeur par défaut différente.

2.0

from

Valeur minimale de l'opacité lors des pulsations.

0.0

pulses

Entier, nombre de pulsations.

5

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Pulsate</title>
<style type="text/css">
<!--
#conteneur{
background-color : blue;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Effets Pulsate.</h3>
<div id="conteneur"></div>
<input type="button" value="Options par défaut" onclick="new Effect.Pulsate('conteneur');" />
<input type="button" value="pulses : 8 / from : 0.5"
onclick="$('conteneur').pulsate({pulses: 8, from: 0.5});" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Fonctionne avec tous les éléments HTML à l'exception des tables.

Effets Shrink / Grow

Les effets Shrink et Grow permettent de faire disparaitre / apparaitre un élément par réduction / augmentation de sa taille par rapport à un bord de celui-ci.
Ces deux effets ne sont pas à proprement parler une paire comme nous le verrons pour l'effet toggle, cependant, ayant un comportement semblable, il m'a semblé préférable de les regrouper.

Syntaxe

new Effect.Shrink('element'[, options]);
$('element').shrink({options});
new Effect.Grow('element'[, options]);
$('element').grow([options]);

Option

Description

Défaut

direction

'center', 'top-left', 'top-right', 'bottom-left' ou 'bottom-right'. Position par rapport à laquelle l'effet se produira.

'center'

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effets Shrink / Grow</title>
<style type="text/css">
<!--
#conteneur{
background-color : blue;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Effets Shrink / Grow.</h3>
<div id="conteneur"></div>
<select id="effet">
<optgroup label="Valeur de l'option direction">
<option value="center">center (défaut)</option>
<option value="top-left">top-left</option>
<option value="top-right">top-right</option>
<option value="bottom-left">bottom-left</option>
<option value="bottom-right">bottom-right</option>
</optgroup>
</select><br />
<input type="button" value="Shrink" onclick="new Effect.Shrink('conteneur', {direction: $('effet').value});" />
<input type="button" value="Grow" onclick="$('conteneur').grow({direction: $('effet').value});" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Ces effets fonctionnent pour les éléments de type block sauf les tables !

Il existe un effet similaire, appelé Squish (voir un exemple), qui fonctionne de la même manière que Shrink doté de l'option direction: 'top-left' et n'acceptant pas l'option direction, nous ne reviendrons pas dessus.

Effet Fold

Cet effet fait disparaitre l'élément en réduisant sa hauteur à 5px puis sa largeur.

Syntaxe

new Effect.Fold('element'[, options]);
$('element').fold({options});

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet Fold</title>
<style type="text/css">
<!--
#conteneur{
background-color : blue;
width : 200px;
height : 150px;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Effet Fold.</h3>
<div id="conteneur"></div>
<input type="button" value="Fold" onclick="new Effect.Fold('conteneur');" />
<input type="button" value="Réinitialiser" onclick="$('conteneur').show();" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

Cet effet fonctionne pour les éléments de type block sauf les tables !

Effet toggle

Il ne s'agit pas à proprement parler d'un effet, mais plutôt d'un raccourci permettant d'appliquer un effet selon des paires prédéfinies pour faire apparaitre ou disparaitre un élément.

Syntaxe

new Effect.toggle('element'[, 'effet'][, options]);

Effet

Paire

'appear' (défaut)

Appear / Fade

'blind'

BlindDown / BlindUp

'slide'

SlideDown / SlideUp

Voir un exemple

Code de l'exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test effet toggle</title>
<style type="text/css">
<!--
#conteneur{
background-color : silver;
width : 300px;
height : 150px;
text-align : center;
}
.exemple{
margin: 40px;
}
-->
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
</head>

<body>
<div class="exemple">
<h3>Effet toggle.</h3>
<div id="conteneur">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<input type="button" value="appear" onclick="new Effect.toggle('conteneur', 'appear');" />
<input type="button" value="blind" onclick="new Effect.toggle('conteneur', 'blind');" />
<input type="button" value="slide" onclick="new Effect.toggle('conteneur', 'slide');" />
</div>
<div>
<input type="button" value="Retour au tuto" onclick="history.go(-1)" />
</div>
</body>
</html>

En conclusion

Les effets de script.aculo.us offrent un large panel d'animations possibles sur vos pages. Cependant, le but est de suffisamment bien maîtriser les différents effets et options afin de pouvoir créer vous-même votre propre collection d'effets personnalisés et d'optimiser le rendu visuel et l'ergonomie de vos pages.

Attention toutefois aux contraintes imposées par certains de ces effets, principalement concernant la structure de votre page et le type des éléments sur lesquels vous les appliquez.
Essayez au maximum d'avoir des pages (x)HTML valides pour éviter les erreurs liées à une mauvaise interprétation du document. À titre d'exemple, on trouve encore trop souvent des pages avec plusieurs éléments ayant le même id ! La tendance actuelle est d'éviter d'utiliser les tables HTML pour afficher des données non tabulaires (Web sémantique), vous aurez une bonne raison d'appliquer cette recommandation avec script.aculo.us (et Prototype), car les effets sont souvent problématiques avec ces éléments.

Enfin, pour ceux qui se sentent à l'aise avec JavaScript, le code du fichier effects.js est relativement clair et expressif, n'hésitez donc pas à regarder comment sont implémentées les différentes fonctions afin de mieux en comprendre les mécanismes et pourquoi pas adapter une partie du code selon vos besoins.

Articles de la série

Àla découverte de script.aculo.us
Les effets visuels de script.aculo.us
À venir : Les contrôles Ajax avec script.aculo.us (édition et autocomplétion de champs).

Remerciements

Un grand merci à Kerod pour sa relecture avisée et ses conseils précieux !