jQuery Approach – Plugin jQuery – Approchez vous pour voir

Voici un petit plugin jQuery qui va vous permettre de créer des effets sur un ou plusieurs éléments d’un site internet lors de l’approche du curseur de la souris. Une petite animation qui permet de détecter l’arrivée du curseur vers un élément et de réaliser une action progressive au fur et à mesure de l’avancée de ce dernier.

jquery-approach

Voici son utilisation :

L’appel des librairies

[pastacode lang= »markup » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.3.2%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2Fjquery.approach-1.0.min.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Et le code javascript

[pastacode lang= »javascript » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%24(%22%23my_object%22).pageSlide(%7B%0A%20%20%20%20%22fontSize%22%3A%20%2248px%22%0A%20%20%7D%2C%20200)%3B%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

Pour résumer, l’élément avec l’identifiant my_object (qui doit être du texte dans cet exemple) va s’agrandir (ou rétrécir) progressivement à l’approche du curseur avec une taille maximale de 48px. L’effet commencera à 200 de distance radiale (par défaut 400).
Pour utiliser les animations de couleurs vous devrez rajouter le jQuery UI Effects Core.

Site, doc et démonstrations

Bon code à tous 🙂

Articles qui peuvent vous intéresser :

Author: Franck Pertegas

Share This Post On

2 Comments

  1. Salut,

    Je me permet juste de présenter ici un plugin que j’ai développé sur le même sujet : jquery.distanceListener.

    C’est même en découvrant le plugin jquery.approach que j’ai eu l’idée de coder distanceListener. En effet j’avais trouvé l’idée de jquery.approach très bonne, mais la réalisation plutôt mauvaise (problèmes d’optimisation et de performances, et de manque d’évolutivité).

    J’avais donc réfléchi à une manière d’améliorer le concept, et j’en étais arrivé à la conclusion qu’il serait intéressant de mettre en place des événements spéciaux : ‘mouseapproach’ et ‘mouseretreat’

    Comme leur nom l’indique, ces deux événements sont déclenchés respectivement lorsque le curseur de la souris approche, ou s’éloigne d’un élément du DOM.

    J’ai essayé également d’optimiser les performances un maximum entre autre en allégeant un maximum les traitement déclenchés par l’événement mousemove (déclenché à une fréquence très importante, donc très vite lourd si on y fait trop de choses).

    Une fois ces deux événements à disposition, cela permet d’envisager beaucoup de choses, et entre autre ce que propose le plugin jquery.approach (grâce aux événement, on applique des styles sur un objet en fonction des déplacement de la souris).

    Sur le dépot gitHub, vous pouvez trouver une petite démo présentant une manière d’exploiter ces événements.

    Vous pouvez trouver le plugin jquery.distanceListener sur gitHub :
    http://github.com/LeMisterV/jquery-distanceListener

    Post a Reply
  2. Salut Nico,

    Merci d’avoir fait partager ton travail.

    Ça m’a l’air bien utile et bien pensé.

    Je jetterais un œil dans la semaine 😉

    A++

    Post a Reply

Trackbacks/Pingbacks

  1. jQuery Cycle Plugin – Plugin jQuery – Toujours plus loin dans les effets « SlideShow » | LudiBlog - [...] jQuery Approach – Plugin jQuery – Approchez vous pour voir [...]
  2. Image Cube – Plugin jQuery – Un effet renversant | LudiBlog - [...] jQuery Approach – Plugin jQuery – Approchez vous pour voir [...]
  3. jQuery – Sélectionner les checkbox enfants | LudiBlog - [...] jQuery Approach – Plugin jQuery – Approchez vous pour voir [...]

Submit a Comment

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