Scriptaculous: Utilisation des effets

Voici un article pour vous expliquer comment utiliser les effets de la librairie javascript scriptaculous avec laquelle mon menu est en parti réalisé.

Attention, sur Over-blog, qui dit javascript dit mode privilège...

Téléchargez et installez scriptaculous

Tout d'abord vous devez télécharger  le fichier zip contenant la librairie javascript scriptaculous.

Ouvrez le fichier zip et extrayez le fichier prototype.js du répertoire lib et les fichiers scriptaculous.js et effects.js du répertoire src.

Uploader ces 3 fichiers sur votre espace de stockage (Over-Blog, hébergeur gratuit ou autre) et notez les url complètes de vos 3 scripts.

Liez les scripts à votre blog

Pour les Over-Blogueurs, dans votre entête en mode HTML, saisissez le code suivant:

HTML

<script src="XXX/prototype.js" type="text/javascript"></script>
<script src="XXX/scriptaculous.js" type="text/javascript"></script>
<script src="XXX/effects.js" type="text/javascript"></script>

Où XXX est l'url du répertoire où se trouve vos scripts.

Pour les webmasters qui ont accès au code source complet de leur site/blog, entre les balises <header>et </header>, saisissez le code suivant:

HTML

<script src="XXX/prototype.js" type="text/javascript"></script>
<script src="XXX/scriptaculous.js?load=effects" type="text/javascript"></script>

Où XXX est l'url du répertoire où se trouve vos scripts.

La syntaxe d'appel d'un effets

La syntaxe de base est:

Effect.NomEffet('id')

La syntaxe avec options est:

Effect.NomEffet('id', {option: valeur, option: valeur})

ATTENTION: Certains effets, Highlight, Move et ScrollTo, nécessitent l'ajout de new devant les syntaxes précédentes:

new Effect.NomEffet('id')

Les effets disponibles: NomEffet

Vous devez remplacer NomEffet par l'un des effets possibles. Attention aux majuscules et miniscules:

Il existe 4 type d'effets: les effets d'apparition / disparition, les effets de disparition sans possibilité de réapparition, les effets de mise en valeurs et les déplacements.

Les effets d'appartition / disparition:

• Fade / Appear
• BlindUp / BlindDown
• Shrink / Grow

Test

Les effets de disparition sans possibilité de réapparition:

• DropOut
• Fold
• Squish
• SwitchOff
• Puff

DropOut

Fold

Squish

SwitchOff

Puff

Les effets de mise en valeur:

• Highlight
• Pulsate
• Shake

Les déplacements:

• Move. (Nécessite obligatoirement une des options x ou y, voir «Les options»)
• ScrollTo

Move

Sur quoi appliquer les effets? id

Vous devez remplacer id par l'identifiant de la zone sur laquelle vous voulez appliquer l'effet.

Si l'identifiant n'existe pas, vous pouvez le rajouter. En mode HTML, il suffit de d'insérer l'attribut id et sa valeur associée à la balise qui vous intéresse.

Par exemple, vous voulez appliquer un effet sur une liste:

<ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
</ul>

Pour pouvoir identifier cette liste, vous lui rajoutez l'identitfiant maListe:

<ul id="maListe">
   <li>...</li>
   <li>...</li>
   <li>...</li>
</ul>

Sur Over-Blog, la majeure partie des éléments constituant votre blog sont déjà identifiés. Il suffit d'utiliser directement les identifiants existants. Calendrier pour le module calendrier, top pour l'entête... Le forum peut cous être d'une grande aide.

Les options disponibles, option: valeur

Les options sont optionnelles (celle là, ça fait longtemps que je voulais la faire gnarf gnarf gnarf!) sauf pour l'effet Move qui nécessite obligatoirement une des 2 options x ou y.

Les options peuvent se cumuler, il suffit de les séparer par un virgule.

Pour tous les effets (sauf Shake):

• delay: délai, en seconde, avant le lancement de l'effet.
• duration: durée, en seconde, de l'effet.

Pour l'effet Highlight:

• startcolor: couleur, en hexadécimale (du type #FFFFFF), de début de l'effet. Par défaut la couleur est jaune.
• endcolor: couleur, en hexadécimale, de fin de l'effet. Par défaut la couleur est blanche.

Pour l'effet Move:

• x: déplacement selon l'axe des abscisses (horizontal), en pixel, à partir de l'emplacement initial. Valeur négative, déplacement vers la gauche; valeur positive, déplacement vers la droite.
• y: déplacement selon l'axe des ordonnées (vertical), en pixel, à partir de l'emplacement initial. Valeur négative, déplacement vers le haut; valeur positive, déplacement vers le bas.

Déclenchez/utilisez les effets, exemples

Vous allez me dire:
- Génial, les scripts javascript sont dans mon espace de stockage, mon blog les charge pour qu'ils soient disponible en cas d'utilisation, je connais la syntaxe pour faire différents effets sur les éléments de mon blog, mais, mais... comment faire pour utiliser ces effets? Comment créer un lien qui lance un effet, comment lancer un effet au chargement de la page...

Je vous répond:
- C'est le but de ce paragraphe ;-)

Déclencher un effet depuis un élément différent de celui qui subit l'effet

Dans ce premier cas, on souhaite, en cliquant sur un lien (vous pouvez extrapoler cet exemple à un autre élément), déclencher le «déhanchement» (effet Shake) du carré orange ci-dessous dont l'identifiant est Waoo . Le code est le suivant:

<a href="#nogo" onclick="Effect.Shake('Waoo')">Secouez!</a>

Secouez!

Waoo

Dans ce deuxième cas, on souhaite, en survolant un lien, déclencher la «surbrillance» (effet Highlight) pendant 5 seconde du carré vert ci-dessous dont l'identifiant est Waoo . Le code est le suivant:

<a href="#nogo" onmouseover="new Effect.Highlight('Waoo', {duration:5})">Brille!</a>

Brille!

Waoo

Explications, dans ces 2 cas, on utilise la balise de l'élément déclencheur (dans nos 2 exemples, la balise de lien <a>), on y renseigne un attribut évènement (onclick, onmouseover) qui déclenchera l'effet, et en valeur de cet attribut on ajoute la syntaxe de l'effet souhaité.

Notez, que dans le cas d'un lien comme élément déclencheur, on doit enseigner l'attribut href par une ancre inexistante afin de ne pas changer de page ou de positionement dans la page au moment du clique.

Notez aussi, que dans le cas de l'effet Higlight au tout début de la syntaxe de l'effet il y a le mot reservé new. Ne l'oubliez pas, il est obligatoire pour cet effet ainsi que les effets ScrollTo et Move.

Déclencher un effet depuis l'élément subissant l'effet

On souhaite, faire disparaître en un «Pouf!» (effet Puff) le carré noir ci-dessous en cliquant dessus, l'effet doit durer 5 seconde:

<div onclick="Effect.Puff(this, {duration:5})">Pouf</div>

Cliquez sur le carré «Puff» pour qu'il fasse «Pouf!»

Puff

Comme vous pouvez le voir, la syntaxe est plus simple avec ce genre d'auto-déclenchement d'effet. L'attribut évènement (onclick) est renseigné dans la <div> qui doit subir l'effet. De plus, il suffit d'indiquer le mot reservé this (celui, celle là) à la place de l'identifiant.

Notez que this ne doit pas être entre quotes contrairement à un nom d'identifiant.

Déclencher un effet au chargement de la page

Les 2 méthodes de déclenchement précédentes sont très bien, mais vous, vous rêvez que les effets s'appliquent dès le chargement de votre page sans que l'internaute n'est à cliquer ou survoler quoi que ce soit!

C'est possible!

Pour cela il suffit d'utiliser l'attribut évènement onload sur une balise image (<img />) présente dans la page qui se charge.

<img src="logo.jpg" onload="Effect.Puff('truc', {delay:1, duration:5}) /">

Exemple 1

Utilisez plusieurs effets simultanément

On souhaite que notre carré vert ci-dessous dont l'identifiant est MultiMove se déplace (Move) vers la droite de 300px, clignote (Pulsate), se déplace (Move) vers le haut de 300px, disparaisse en un fondu (Fade) de 4 secondes et que la page actuelle remonte tout en haut à vitesse réduite (ScrollTo). Le code est le suivant:

<a href="#nogo" onclick="new Effect.Move('MultiMove', {x:300});
   Effect.Pulsate('MultiMove', {delay:1.5});
   new Effect.Move('MultiMove', {y:-300, delay: 4.5});
   Effect.Fade('MultiMove', {delay:7, duration:4});
   new Effect.ScrollTo('top', {delay:10, duration:8})"> Let's go!
</a>

Let's go!

Rien que ça!

En fait, pour enchaîner des effets, c'est très simple, il suffit juste de les noter à la suite en les séparant par un ; (point virgule). Il faut aussi jouer sur l'option delay de chaque effet afin qu'ils s'enchainent parfaitement dans le temps.

Va et vient sur les effets complémentaires d'apparition / disparition

Le concept

Comme nous l'avons vu plus haut, les effets d'apparition / disparition vont par paire. Il peut vous sembler utile de les utiliser avec les 2 effets complémentaires fonctionnant avec un même élément déclencheur.

Un exemple vaut mieux que des grandes phrases, vous savez faire ça:

Masquez la liste (BlindUp) et Affichez la liste (BlindDown)

• item 1
• item 2
• item 3

Maintenant, vous allez apprendre à faire ça:

Affichez/Masquez la liste... cliquez et recliquez!

• item 1
• item 2
• item 3

Le comment faut faire

La syntaxe est la suivante:

Effect.toggle('id','familleEffet')

Où familleEffect est le nom de la famille selon le couple d'effets souhaité:

• appear pour Fade / Appear.
• blind pour BlindUp / BlindDown.

Ainsi, pour le lien «Affichez/Masquez la liste» (exemple plus haut), le code utilisé est le suivant:

HTML

<a href="#nogo" onclick="Effect.toggle('listeToggle','blind')">Affichez/Masquez la liste</a>

Avec listeToggle comme identifiant de la liste.

Bon amusement...