Table des matières
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

!!Note: Pour faire réaparaitre l'image, utilisez l'effet Effect.Appear !!
Voir l'effet Effect.Appear
Voir l'effet Effect.Fade
Voir l'effet Effect.Puff
Voir l'effet Effect.BlindDown
Voir l'effet Effect.BlindUp
Voir l'effet Effect.SwitchOff
Voir l'effet Effect.SlideDown
Voir l'effet Effect.SlideUp
Voir l'effet Effect.DropOut
Voir l'effet Effect.Shake
Voir l'effet Effect.Pulsate
Voir l'effet Effect.Squish
Voir l'effet Effect.Fold
Voir l'effet Effect.Grow
Voir l'effet Effect.Shrink
Voir l'effet Effect.Highlight
Voir l'effet Effect.toggle


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