Les effets visuels de script.aculo.us

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

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

Sélectionnez

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

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

Sélectionnez

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

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

Sélectionnez

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

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

Sélectionnez

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

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

Sélectionnez

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

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

Sélectionnez

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

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

Sélectionnez

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

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

Sélectionnez

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

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

Sélectionnez

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

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

Sélectionnez

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

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