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

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.

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
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