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

Introduction · 01/01/1970 01:00

Discussion

Gio, 03/03/2007 18:32:

Bonjour, lorsque j’effectue le test une erreur me renvoi “Effect” est indéfini, alors que tout est correct mon id=”mytext” est ce à cause de IE6 ? Un Effect.appear peut il être affecté dans un texte mis dans un tableau.

merci

iDo, 09/03/2007 17:35:

Salut, il faudrais un peu plus de détails.
Colle ton code sur le pastebin du site pour qu’on puisse voir.

stargatejojo, 13/04/2007 16:40:

Bonjour,

Voila j’ai un problème ...

J’ai beau utilisé le même JS que vous, j’obtiens cette erreur : http://serv1.upload4you.free.fr/perso/158/1176475145.png

Si vous pouviez m’aider Merci d’avance

iDo, 13/04/2007 17:32:

il faudrais que tu vérifis le parametre que tu passe a ton effet.
dans notre exemple, c’est document.getElementById(’demo-all’) et il s’agit d’un objet sur notre page. Si tu utlise aussi getElementById, peut etre essaye tu d’obtenir un objet par un mauvais id...
comment appelles-tu ton effet ?

stargatejojo, 14/04/2007 12:08:

L’id de l’élément HTML a été vérifié, c’est exactement le même que celui que je fait appelle dans le javascript

Après beaucoup d’analyse de ma page, en enlevant des parties etc... J’ai découvert que avec JQuery ca bug, sans ca fonctionne

Est-ce un bug de votre côté ou de celui de JQuery ?

Merci d’avance

iDo, 14/04/2007 23:31:

il y a peut-être un pb dans la librairie prototype.js.
Depuis l’écriture de l’article, un nouvelle version est sortie. Peut-être qu’elle corrige ça.
tu peu la trouver ici : http://www.prototypejs.org/

stargatejojo, 15/04/2007 10:56:

Je te remercie beaucoup pour ton aide !

Je test cette version et je te dis

Merci

Jim_Nastiq, 20/07/2007 11:47:

Qu'en est il du zoom? dans la présentation rapide (tout en haut) il parle de zoom-in et zoom out mais je ne le vois pas! peut on zoomer genre comme l'effet puff mais sans disparition ensuite de l'image par exemple?

en tout cas merci bno boulot ;-)

iDo, 21/07/2007 16:41:

Salut !
L'effet dont tu a besoin se nomme scale.
Voici la page ou tu trouvera plus de détails : http://wiki.script.aculo.us/scriptaculous/show/Effect.Scale
Sont utilisation est a peu de chose prés identique aux autres effets.

Vibra, 26/09/2007 22:35:

Bonjour,

Ces scripts m'intéressent beaucoup car ils marchent à la fois sous IE et Firefox. Je voudrais les utiliser dans un script de défilement d'images avec un effet d'effacement de l'image n-1 puis un effet d'affichage de l'image n. Mais je n'arrive pas à avoir un bon fonctionnement.

Mon code est visible sur http://vb-photo.com/effets/

Quelqu'un peut-il m'aider, svp ?

iDo, 22/10/2007 14:00:

Salut ! tu dois utliser la queue d'effet. Il faut paeller tes effet comme ceci :

javascript

new Effect.SlideUp(document.getElementById('test'), { queue: 'end'});

au leu de

javascript

new Effect.SlideUp(document.getElementById('test'));

Plus d'info ici : http://wiki.script.aculo.us/scriptaculous/show/EffectQueues

Chargement en cours...

Introduction

Exemples

Téléchargement

Utilisation

Discussion