Visualisation d'une page Webjax
Effect.Shake()
L'effet Effect.Shake() permet de faire bouger un élément DOM précisé de la gauche vers la droite puis inversement de façon répétée.
Cet effet peut être modifié dans le fichier "effect.js" afin de l'adapter à vos réels besoins en terme d'action "secouer un élément DOM".
Un exemple d'utilisation de cet effet vous est présenté ci après.
Vous pourrez trouver suite à l'exemple le code source de cet effet Effect.Shake() qui détaille le mouvement ou plutôt l'enchaînement de mouvement effectués dans l'effet.
Exemple simple d'utilisation de Effect.Shake
Cet exemple vous montre comment utiliser Effect.Shake.
L'exemple est testable ci après :
toto président, toto président, webjax c'est bien webjax c'est bien
Durée de l'effet (duration) :
!!! :: la liste déroulante de sélection de durée de l'effet est désactivée en raison de la définition
spécifique de cet effet dans le fichier "effects.js".
Les durées des mouvements peuvent être définies dans ce fichier en suivant l'exemple de modification
présenté en deuxième partie de cette page.
Le code de l'exemple est recopié ci après :
Code source depuis "effects.js" de Effect.Shake()
Voici le code Javascript contenu dans le fichier "effects.js" qui définit
l'effet Effect.Shake() .
Le code consiste donc en une succession d'effets Effect.Move() dont les directions
de mouvement sont les suivantes : right (20), left (-40), right (40), left (40)
, right (40) et left (20) pour revenir à la position de base.
Une modification très basique et sans prétentions de cet effet pourrait être de laisser
l'élément DOM sur lequel est appliqué l'effet dans sa dernière position sur la droite.
Il suffit pour cela d'adapter le code pour recopier la méthode 'callback', 'afterFinishInterval' du dernier
effet dans l'avant dernier, puis de supprimer le code du dernier effet.
Cela donnerait donc le code source suivant pour la définition dans "effects.js" de cette nouvelle version
de l'effet :
Notons que la durée de déplacement du dernier mouvement a été mise à "0.5" afin
de pouvoir l'identifier distinctement.
!!! :: en raison de l'adaptation trop spécifique que nécessiterait la présentation
de cette modification de Effect.Shake() , aucun exemple n'est présenté réellement dans Webjax.
Vous pouvez cependant profiter de votre version locale de Scriptaculous pour effectuer
vos tests et définir vos propres effets de "secouage".
Cet effet peut être modifié dans le fichier "effect.js" afin de l'adapter à vos réels besoins en terme d'action "secouer un élément DOM".
Un exemple d'utilisation de cet effet vous est présenté ci après.
Vous pourrez trouver suite à l'exemple le code source de cet effet Effect.Shake() qui détaille le mouvement ou plutôt l'enchaînement de mouvement effectués dans l'effet.
Exemple simple d'utilisation de Effect.Shake
Cet exemple vous montre comment utiliser Effect.Shake.L'exemple est testable ci après :
toto président, toto président, webjax c'est bien webjax c'est bien
Durée de l'effet (duration) :
!!! :: la liste déroulante de sélection de durée de l'effet est désactivée en raison de la définition spécifique de cet effet dans le fichier "effects.js".
Les durées des mouvements peuvent être définies dans ce fichier en suivant l'exemple de modification présenté en deuxième partie de cette page.
Le code de l'exemple est recopié ci après :
Code source depuis "effects.js" de Effect.Shake()
Voici le code Javascript contenu dans le fichier "effects.js" qui définit l'effet Effect.Shake() .Le code consiste donc en une succession d'effets Effect.Move() dont les directions de mouvement sont les suivantes : right (20), left (-40), right (40), left (40) , right (40) et left (20) pour revenir à la position de base.
Une modification très basique et sans prétentions de cet effet pourrait être de laisser l'élément DOM sur lequel est appliqué l'effet dans sa dernière position sur la droite.
Il suffit pour cela d'adapter le code pour recopier la méthode 'callback', 'afterFinishInterval' du dernier effet dans l'avant dernier, puis de supprimer le code du dernier effet.
Cela donnerait donc le code source suivant pour la définition dans "effects.js" de cette nouvelle version de l'effet :
Notons que la durée de déplacement du dernier mouvement a été mise à "0.5" afin de pouvoir l'identifier distinctement.
!!! :: en raison de l'adaptation trop spécifique que nécessiterait la présentation de cette modification de Effect.Shake() , aucun exemple n'est présenté réellement dans Webjax.
Vous pouvez cependant profiter de votre version locale de Scriptaculous pour effectuer vos tests et définir vos propres effets de "secouage".
: 07/01/2007 23:40:11 | 
: Scriptaculous, Scriptaculous.js, Effect.Shake, Shake, Effect, CombinationEffects, multibrowser, comptatibility, secouer, mouvement, déplacement, 
