Plugin JQuery : effet avant/apres avec le plugin Before/After

jquery-before

Petit plugin JQuery que j’ai découvert ce matin. Il permet de faire un effet avant/après sur une photo. Simplement grâce à un glisser/déposer sur l’icone permet de déplacer la limite entre les deux images.

Si les explications n’étaient pas claires, tu peux toujours aller voir la démo préparée pour l’occasion. Le plugin JQuery Before After est fluide, l’animation est nickel et l’effet rendu du plugin fonctionne bien. Il peut être utile pour un portfolio pour montrer diverses compétences en retouches d’image par exemple.

Le plugin propose diverses options comme activer une animation au début (le curseur se déplace tout seul), le délai avant le début de cette animation, la durée de cette animation, la présence des liens « show only before » et « show only after ». Enfin petit détail, il faut que les deux images (avant et après) soit de la même taille pour le plugin fonctionne bien !

Demo

Pas encore de billet sur le même sujet !

Cette entrée a été publiée dans JQuery, avec comme mot(s)-clef(s) , . Vous pouvez la mettre en favoris avec ce permalien.

Une reponse a Plugin JQuery : effet avant/après avec le plugin Before/After

  1. Nico dit :

    Hello Arnaud !

    Je me permets de poster ici un petit commentaire pour savoir si tu peux me filer un petit coup de main. J’ai essayé d’intégrer ce plugin pour l’utiliser sur un blog WordPress mais je n’ai pas réussi. Je ne sais pas trop pourquoi. J’ai vu que tu avais mis en place une démo sur ton blog justement. Peux-tu me dire comment tu as fait stp ? ;)
    Voici le site où j’ai tenté de le mettre en place : http://withoutfx.com/withoutfx/

    Merci ;)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">