IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Les effets visuels de script.aculo.us

Les effets visuels de script.aculo.us


précédentsommairesuivant

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 :

 
Sélectionnez
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.

I-A. 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 :

Evé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.

I-B. 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
Sélectionnez
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
Sélectionnez
<!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
Sélectionnez
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
Sélectionnez
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
Sélectionnez
<!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
Sélectionnez
new Effect.Morph('id_element',{style: 'propriete-css1: valeur1; propriete-css: valeur2;'[, options]});
Syntaxe hash
Sélectionnez
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
Sélectionnez
<!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
Sélectionnez
new Effect.Move('id_element', { x: 0, y: 0, mode: 'absolute' });
Syntaxe mode relative
Sélectionnez
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
Sélectionnez
<!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
Sélectionnez
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
Sélectionnez
<!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
Sélectionnez
new Effect.ScrollTo('id_element'[, options]);

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

Voir un exemple

Code de l'exemple
Sélectionnez
<!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
Sélectionnez
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
Sélectionnez
<!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>

précédentsommairesuivant