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.
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.
<!
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.
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é.
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. |
'box' |
scaleFrom |
Pourcentage de début de l'effet |
100.0 |
<!
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.
new Effect.Morph
(
'id_element'
,{
style
:
'propriete-css1: valeur1; propriete-css: valeur2;'
[,
options]}
);
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.
<!
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:
50
px 0
10
px 50
px;
width:
100
px;
height:
100
px;
color:
#000
;
background-color:
#FFF
;
border:
1
px 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.
new Effect.Move
(
'id_element'
,
{
x
:
0
,
y
:
0
,
mode
:
'absolute'
}
);
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.
<!
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:
50
px 0
10
px 50
px;
width:
200
px;
height:
100
px;
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.
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 |
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 !
<!
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:
40
px;
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.
new Effect.ScrollTo
(
'id_element'
[,
options]
);
'id_element' est l'élément vers lequel on veut aller.
<!
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.
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.
<!
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:
40
px;
}
-->
</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>