Niveau

En rapport...

Introduction

Vous pensiez que les mot zoom-in, zoom-out, fade, slide up, slide down et autres était reservé au effet pour le smontage vidéo ?
Et bien non ! Grace à Thomas Fuchs vous pourrez animé n'importe quel objet de vos page HTML avec une simplicité étonnante !

Exemples

Cliquez sur un des liens pour voir l'effet

Téléchargement

Pour utiliser les effets, ils vous faut 2 fichiers :

Utilisation

Pour utiliser un effet, rien de plus simple :
Tous d'abord, déclarez les fichier javascript dans la section <head> de votre page :

html4strict

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

!!important : veillez a respecter l'ordre ! D'abord prototype puis effects…!!
Maintenant que les effets sont chargé dans votre page, pour les utilisez, il suffit d'appeler la fonction Effect.XXXXX où XXXXX correspond au nom d'un effet.
Exemple :

javascript

new Effect.Shrink(document.getElementById('demo-all'));

Chaque fonctions de création d'effet dispose d'un paramètre. Ce paramètre est un objet.
Ici, il s'agit du DIV dont l'ID est “demo-all”

Pour demarrer un effet avec un div invisible, vous devez :
- pour l'effet Effect.Appear ⇒ mettre “display:none” dans le style du div
(ex : <div style=“display:none”></div>)
- pour les effets Effect.BlindDown et Effect.SlideDown ⇒ faire appel aux effets opposés (respectivement Effect.BlindUp et Effect.SlideUp) au chargement de la page.

— iDo 07/02/2006 09:50

Discussion

yass raid, 11/03/2007 17:15:

Bonjour peut on agir sur plusieurs objets a la fois en utilisant le code ci dessus , car apres avoir fait le test on peut agir que sur un seul objet si vous avez une astuces ??? merci de m’aider ;)

iDo, 15/03/2007 17:30:

Salut, on peu en effet agir sur plusieurs objets
Mais il me faudrais un peu plus de détail pour pouvoir t’aider.
Peut tu coller sur le pastebin un exemple de ce que tu veux faire ?

++

Charly, 07/06/2007 16:53:

Bonjour, Comment peut-on vérifier l’état de notre élément, c’est à dire comment peut-on savoir si il est visible ou non ? Merci d’avance.

maniT4c, 08/06/2007 09:43:

Tu peux vérifier si ton element est affiché avec du javascript en utilisant une condition if (document.getElementById(‘monId’).display==‘block’) {}

Vince, 02/10/2007 22:36:

Bonjour

J'ai un petit soucis a utiliser les sytème.

J'ai sans cess ma concole javascript qui me dit Effect is not defined

Hors je défini bien les deux js en head.

Voici mon code:

html4strict

 
<head>
 
<script type="text/javascript" src="./prototype.js"></script>
 
<script type="text/javascript" src="./effects.js"></script>
 
</head>
 
<body>
 
<a onclick="new Effect.Appear(document.getElementById('demo-all'));">Voir l'effet Effect.Appear </a><br />
 
<a onclick="new Effect.Fade(document.getElementById('demo-all'));">Voir l'effet Effect.Fade </a><br />
 
<a onclick="new Effect.Puff(document.getElementById('demo-all'));">Voir l'effet Effect.Puff </a><br />
 
<a onclick="new Effect.BlindDown(document.getElementById('demo-all'));">Voir l'effet Effect.BlindDown </a><br />
 
<a onclick="new Effect.BlindUp(document.getElementById('demo-all'));">Voir l'effet Effect.BlindUp </a><br />
 
<a onclick="new Effect.SwitchOff(document.getElementById('demo-all'));">Voir l'effet Effect.SwitchOff </a><br />
 
<a onclick="new Effect.SlideDown(document.getElementById('demo-all'));">Voir l'effet Effect.SlideDown </a><br />
 
<a onclick="new Effect.SlideUp(document.getElementById('demo-all'));">Voir l'effet Effect.SlideUp </a><br />
 
<a onclick="new Effect.DropOut(document.getElementById('demo-all'));">Voir l'effet Effect.DropOut </a><br />
 
 
 
<a onclick="new Effect.Shake(document.getElementById('demo-all'));">Voir l'effet Effect.Shake </a><br />
 
<a onclick="new Effect.Pulsate(document.getElementById('demo-all'));">Voir l'effet Effect.Pulsate </a><br />
 
<a onclick="new Effect.Squish(document.getElementById('demo-all'));">Voir l'effet Effect.Squish </a><br />
 
<a onclick="new Effect.Fold(document.getElementById('demo-all'));">Voir l'effet Effect.Fold </a><br />
 
<a onclick="new Effect.Grow(document.getElementById('demo-all'));">Voir l'effet Effect.Grow </a><br />
 
<a onclick="new Effect.Shrink(document.getElementById('demo-all'));">Voir l'effet Effect.Shrink </a><br />
 
<a onclick="new Effect.Highlight(document.getElementById('demo-all'));">Voir l'effet Effect.Highlight </a><br />
 
 
 
 
 
<div>
 
  <div id="demo-all" style="width:150px;height:190px;background:#456">
 
	  <span>Cliquez sur un des liens pour voir l'effet</span>
 
  </div>
 
  </body>

Merci

iDo, 23/10/2007 11:41:

salut,
la seule raison que je vois c'est que le chemin vers les deux fichier js n'est pas correct…

roge rapo, 06/12/2007 06:03:

A part pour Highlight (de ce que je me souviens), il ne faut pas écrire new Effet.XXXX mais seulement Effect.XXX

njantou, 23/10/2007 09:44:

SALUT LES SAVANT AIDEZ MOI, JE DEBUTE EN JAVASCRIPT,mon souhait est de prendre le contrôle des navigateurs chez le client et animez les objets de la page car je travaille déja avec PHP comme il s'execute cote serveur j'ai besoin des EXEMLPES CONCRETs avec javascript

iDo, 24/10/2007 16:07:

Tu en demande bcp… surtout en débuttant.. tu devrais d'abort suivre quelque tutoriel…

Blaster, 15/04/2008 12:00:

Bonjour, Je souhaiterai enchainé deux foncions mais je ne trouve pas comment faire … voila a quoi ressemble ma fonction : function disparition (){

new Effect.SlideUp(document.getElementById('corpspage')); /* faire disparaitre l'élément 'corpspage'
/* ici je vodrais coder une pause ou une vérification que l'élément 'corpspage' est invisible*/
new Effect.SlideDown(document.getElementById('corpspage')); /* Ici le faire réapparaitre avec de nouvelle données */
};

Merci d'avance de votre aide Cordialement

Ferreira Patrick, 15/04/2008 16:52:

Salut,

avant tout, c'est une très bonne bibliothèque! félicitation.

J'aimerai juste faire quelques remarques;

1- Serait-il envisageable d'envoyer au constructeur de la classe Effect un tableau d'élément? typiquement le résultat d'un [CODE]$$('div.monStyle')[/CODE]

2- Un méchant bogue est visible sous IE6 et version inférieur lors de l'utilisation de ceci : [CODE]new Effect.toggle( e2, 'blind' )[/CODE]

sinon rien signaler pour le moment :o)

encore merci.

Francois Ludovic, 29/04/2008 12:19:

Salut

j'ai mis en en place des effets sur plusieurs object à la fois sous FF tous fonctionne correctement

mais sous ie les effets ne se font pas

et je n'ai pas d'erreur js je pense que c'est le point n°2 du topic ci-dessus

viki53, 10/05/2008 13:47:

Bonjour, je viens de mettre en place l'effet toggle de scriptaculous sur mon site.

Il fonctionne très bien je dois dire et me convient parfaitement.

Mais j'aurais aimé savoir s'il était possible d'enregistrer les états des éléments dans un cookie ou une session.

En fait cela me sert à cacher/montrer mon menu latéral. mais j'aurais voulu que le menu reste dans la même position d'une page à l'autre.

A mon avis en enregistrant un cookie, ça doit être possible, mais n'étant pas un pro en JS, j'ai un peu de mal.

viki53, 11/05/2008 11:53:

Oups, pardon, ce n'est pas Scriptaculous. -_-'

C'est Prototype (au passage, ça m'a l'air plus léger). :)

J'en reviens à ma question: Pense-vous qu'il soit possible d'enregistrer les données dans un cookie pendant le onclick ?

Car j'utilise l'effet dans mon menu, mais aussi dans mes pages, en passant par une fonction.

iDo, 12/05/2008 23:33:

Salut,
Tu peux tout à fait l'enregistrer dans un cookie :)
Voila 2 fonctions qui vont t'y aider : gerer facilement les cookies

Chargement en cours...

Opportunité JOB :

Introduction

Exemples

Téléchargement

Utilisation

Discussion