Les effets visuels de script.aculo.us

Date de publication : 17 décembre 2008


 

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


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.

warning 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});
info 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});
info 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});
info 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>
info 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>
info Cet effet fonctionne pour les éléments de type block sauf les tables !
warning 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});
warning 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>
info Cet effet fonctionne pour les éléments de type block sauf les tables !
warning Sous IE6, les éléments block flottants doivent être positionnés en relative.
warning 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>
info Fonctionne avec tous les éléments HTML à l'exception des tables.

Effets Shrink / Grow

Les effets Shrink et Grow permettent de faire disparaître / apparaître 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>
info Ces effets fonctionnent pour les éléments de type block sauf les tables !
warning 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>
info 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>

 
 

Valid XHTML 1.1!Valid CSS!

Vos questions techniques : forum d'entraide JavaScript - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2010 www.developpez.com - Legal informations.