Scriptaculous: Utilisation des effets

Publié le par PêUR

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>

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>

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:

Test
 

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

DropOut
Fold
Squish
SwitchOff
Puff

Les effets de mise en valeur:

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

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

 

Publié dans Webdev

Commenter cet article

sa-q 03/08/2007 12:24

Gé-nial, ça va beaucoup m'aider ! Thx a lot :D

Fred 29/07/2007 00:28

Très bon billet, je te remercie pour toutes ces informations. En revanche, petit soucis sur l'effet de blind. J'ai fait un truc dans le genre de ton menu du haut mais quand je le remonte, sur la fin, j'ai un sale effet de clipping.

Une idée du problème ?

Helioss 25/07/2007 19:24

Bonjour,

je n'arrive pas à adapter ce tuto sur mon blog.
A savoir la partie de l'effet afficher/masquez la liste. J'aimerais faire ça sur mon blog, avec pour déclencheur mes images. J'ai déjà mis les 3 scripts dans l'entête.

J'ai insérer ça au début :


Mais ça ne fonctionne pas!
Merci de m'aider

veronica 22/06/2007 09:15

bonjour,

merci pour ce tutotiel tres utile
en revanche je voudrais que ma liste a l'ouverture de mon blog soit masquee( comme pour ton menu) comment faire pour avoir la liste a l'ouverture masquee( oups la je me repete)
merci

ricky 21/06/2007 14:23

en fait,
et en gro c'est reprendre le systeme de gucci,
qui fait qu'une fois que chaque deplacment de tes id sont effectif, un lien te ramene au debut du slide, je crois que tu avais deja repondu a quelqu'un qu'ils avaient crée un slider.js,
tu peux voir l'exemple (le mien) à cette adresse
http:/www.batimentd.com/slide1.html
c'est par le lien retour que je voudrais revenir au debut du slide

PêUR 21/06/2007 16:26

J'avais répondu que les développeurs ayant travaillés sur le site de Gucci avaient créés un js s'appuyant sur scriptaculous nommé slider.js. Et qu'il fallait fouillé par là.
Attention au copyright :)