jQuery Background Position, mettez du mouvement dans votre background

25/10/2007
Web Développement et Design Allez aux commentaires

Je vais vous présenter ici un plugin que j'utilise sur WebInventif.

jQuery Background Position va donc vous permettre d'animer très simplement le background de vos éléments HTML !

Pour voir le plugin en action, il vous suffit de survoler les liens similaires en bas de cette page, ou alors d'aller voir la demo sur le site.

En fait ce plugin étend la fonction .animate de jQuery ;)

Installation du Plugin

  1. On télécharge et on inclue la librairie jQuery entre les balises HTML <head> et </head> :
    <script type="text/javascript" src="jquery-latest.pack.js"></script>
  2. Ensuite on télécharge le plugin et on inclue le fichier "backpos.js" juste en dessous de jQuery :
    <script type="text/javascript" src="backpos.js"></script>

Utilisation du plugin

Je vais vous fournir plusieurs exemples simple ...

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
Par contre il doit impérativement ce trouver après le plugin.

Animer le background d'un élément lorsqu'on le survol

$("#element").css({backgroundPosition: "left 0"}).hover(
  function () {
    $(this).animate({backgroundPosition: "(right 0px)"});
  },
  function () {
    $(this).animate({backgroundPosition: "(left 0px)"});
  }
);

Donc j'ai appliqué l'effet sur un élément avec une id="element", et son background va glisser complètement vers la droite au survol, et revenir à gauche après le survol.

Animer le background comme sur mes liens similaires

$("li a").css({backgroundPosition: "right 0"}).hover(
  function () {
    $(this).animate({backgroundPosition: "(90% 0px)"});
  },
  function () {
    $(this).animate({backgroundPosition: "(right 0px)"});
  }
);

Donc l'effet s'applique à tout les liens se trouvant dans une liste. Le background va glisser de la droite jusqu'à 90% de la longueur total (donc il ne glisse que de 10% réellement). Et ensuite revenir a sa position d'origine.

Voilà, libre a vous de changer le "hover" par un évènement "click" ou autre (voir liste des évènements)

Ps: pour que celà fonctionne, vous êtes obligé d'initialiser le css comme dans les exemples (je parle du .css({backgroundPosition: blabla ...})), sinon cela ne fonctionnera pas !

Conclusions

Ce petit plugin permet de compléter la fonction .animate native de jQuery. La fonction .animate permet normalement de faire de l'interpolation sur les valeurs CSS, étrangement ils n'ont pas inclus la position du background.

Evidement ce plugin est purement décoratif, mais faut avouer que ça en jette non ? :D

-----

Articles relatifs

  1. caizinho
    15/01/2008 à 12:07 | #1
    Répondre | Citer

    vous êtes obligé d’initialiser le css ??? un peu d explication stp

  2. k-ny
    15/01/2008 à 12:15 | #2
    Répondre | Citer

    Hello, l’initialisation se trouve là (en gras):

    $(« li a »).css({backgroundPosition: « right 0″}).hover

    Donc dans cette partie, tu dois mettre la position « de départ » de ton background, c’est tout ;)

  3. Mr.MoOx
    19/03/2008 à 20:29 | #3
    Répondre | Citer

    Héhey!
    Ca va donner du vivant à mon fond nuageux ;)

  4. jeanmarie
    16/02/2009 à 14:05 | #4
    Répondre | Citer

    Salut,

    je cherche à utiliser le plugin backpos pour faire apparaitre l’image de fond d’un item d’une liste (pour éviter d’avoir a utiliser Flash).

    Du coup, il faut que l’initialisation et le retour se fasse sur des positions négatives.

    Mon script:
    $(« #menu li »).css({backgroundPosition: « -35px 0px »}).hover(
    function () {
    $(this).animate({backgroundPosition: « (60px 0px) »});
    },
    function () {
    $(this).animate({backgroundPosition: « (-35px 0px) »});
    }
    );

    L’initialisation fonctionne mais le retour (quand la souris sort du li) ne fonctionne pas: que la valeur x soit positive ou négative, c’est la position positive qui est appliquée.

    J’espère être compréhensible!

    Un coup de main serait le bien venu,
    merci…

    jean marie

  5. toto
    27/01/2010 à 17:28 | #5
    Répondre | Citer

    iop

    dommage que l’exemple soit plus dispo.
    tenter sur un bg d’input mais n’a pas marché .

    ++

  6. Caro de Normandie
    10/02/2010 à 15:23 | #6
    Répondre | Citer

    Bonjour,
    Voici des tuto qui valent le détour : vraiment génial !!
    J’ai essayé aussi jquery en background défilant et c’est top.
    Par contre, je cherche un tuto pour faire apparaître des images en background également mais l’une sur l’autre (4 maxi). Les dessins doivent se superposer, tout simplement en s’affichant en différé l’un l’autre (1 ou 2 seconde d’intervale)…
    Merci de me donner une piste.

  7. Kévin
    05/09/2011 à 08:55 | #7
    Répondre | Citer

    Notez qu’avec cette version du plugin, il y a un bug quand on exécute ce code:

    jQuery(document).ready(function(){
    jQuery(‘a[href=#header]‘).click(function(){
    jQuery(‘html, body’).animate({scrollTop:0}, ‘slow’);
    });

    jQuery(‘#cat_follow a’).hover(function(){
    jQuery(this).stop().animate({backgroundPosition: ’0 0′}, 500);
    },function(){
    jQuery(this).stop().animate({backgroundPosition: ’0 20px’}, 500);
    });
    });

    Mais grâce à cette version : http://plugins.jquery.com/project/backgroundPosition-Effect

    Le problème est résolu. En gros, cela permet d’arrêter l’animation proprement quand l’utilisateur n’a plus la souris dessus :)

  1. Pas encore de trackbacks