Tutoriel Vidéo jQuery : Menu animé avec jQuery

Dans ce tutoriel vidéo vous apprendrez à utiliser jQuery et le plugin BackgroundPosition Animation pour améliorer les effets de survol de vos bouton. Le principe sera de faire défiler derrière le bouton une image spéciale (un dégradé par exemple) pour créer différents types d'effets.

Démonstration


Télécharger la vidéo
(Réservé aux premiums)

Télécharger les sources
(Réservé aux premiums)


Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.

Vous aimerez aussi

localStorage

localStorage
14m

Le localStorage vous permet de sauvegarder des informations directement...

Plupload

Plupload
1h6

Dans ce tutoriel vidéo vous découvrirez comment utiliser le plugin...

43 commentaires
Ajouter un commentaire

Wilose Il y a 3 mois Répondre

Bonjour,
super tuto merci.

J'ai eu du mal à trouver le plugin, donc je me suis rendu sur la page de démonstration et j'ai lâchement copier jquery et javascript.

Mais merci encor pour toutes ces petites astuces qui transforme nos site web

Partizzaniii Il y a 8 mois Répondre

Plus Beau et très simple :D j'aime bien

itachi0309 Il y a 8 mois Répondre

sympa ;-)
mais moi ça ne veut pas fonctionner j'ai un écran tout blanc ...

corpobeziers Il y a 10 mois Répondre

Salut à tous!
J'ai testé ça marche nikel!
Petit problème par contre j'arrive pas à l'intégrer à mon wordpress... :/
Quelqu'un aurait-il la solution?

Artof Il y a 2 ans Répondre

Bonjour,

Je tiens à vous féliciter pour la qualité de vos tuto, chui fan !
Par contre, même problème que Mac_n_Jack : je ne parvient pas à télécharger le plugin sur le site jquery ,aucun lien ....
Merci d'avance pour une solution qui me permettrai de finir ce tuto !

@+

seb Il y a 1 an

Même problème que les 2 du dessus :/

Grafikart Il y a 1 an - Répondre

Les liens sont dispo sur la liste des release : http://plugins.jquery.com/node/648/release?order=file_name&sort=asc

Cliquez sur le lien .....txt

Mac_n_Jack Il y a 2 ans Répondre

Bonjour,

Pourquoi selon vous je ne peux pas telecharger le plugin en question sur le site de Jquery, aucun lien, rien.

:(

joe le rigolo Il y a 2 ans Répondre

Clair, précis et instructif.

Merci, tout simplement.

Et pour celui qui avait posé une question sur la possibilité de faire l'effet vers le bas (et non vers le haut), suffit de :
1- créer ton image de façon à avoir la partie à afficher en premier lieu (donc celle qui à 25px de hauteur) en bas de l'image complète (et non en haut comme dans le tuto).

2- Dans le fichier css, tu mets une position 0px -225px (ces valeurs, je les mets intuitivement, ajuster s'il le faut)

3- Dans le script, lorsque tu anime la position de l'image, mets pour la première fonction:{backgroundPosition: 0px 0px}, et pour la seconde: {backgroundPosition: 0px -225px}

Nicolas FORMOSO Il y a 2 ans Répondre

Vraiment génial, merci pour ton esprit de partage !

brekiano Il y a 2 ans Répondre

j'arrive pas a voir les videos? est ce qu'il manque un plugin pour mon browser?

Mikdo Il y a 2 ans Répondre

Super TUTO Un grand merci .
Tout est dans la simplicité ;-)

Nemocat Il y a 2 ans Répondre

Bravo et merci pour ce tuto. Je débute en jquery et il est très simple à comprendre. Par contre, j'ai beau chercher mais je ne trouve pas comment faire en sorte que ça se déplace de gauche à droite et non de haut en bas (j'ai une image de fond en longueur).

Si quelqu'un à la réponse, merci d'avance !

Nico Il y a 2 ans Répondre

Salut à tous,

Merci pour ce tuto, simple et efficace.

J'ai cependant une question, est-il possible de créer ce menu en le faisant monter au lieu de descendre?

Merci à tous ceux qui une idée.

Nico Il y a 2 ans Répondre

Merci raton laveur. Merci.

Tatoum Il y a 2 ans Répondre

Je ne remercierais jamais assez ceux qui prennent de leur temps pour penser aux autres sans qu'il y ait une relation commerciale. Je suis très heureux d'avoir pu bénéficier de ce tutoriel. Merci

Alex Il y a 2 ans Répondre

Merci et bravo pour ce tuto

Mickael Il y a 2 ans Répondre

Nous avons rédigé un article sur le plugin de jquery permettant d'effectuer des dégradés de couleurs dans les BG des DIV

http://www.outils-du-web.com/2010/03/jquery-effets-de-couleurs-degrades.html

nintenwii Il y a 2 ans Répondre

Salut,
j'ai bidouillé le code pendant près d'une heure et pas moyen de définir un temps à l'animation.
Le rollover marche très bien à l'horizontal, mais lorsque que je veux faire monter progressivement une image à la verticale, il n'y a aucune animation qui s'applique, l'image monte comme si on ne mettait qu'un :hover, si vous voyez ce que je veux dire.

Donc je ne sais pas à quoi c'est du, si tu as une explication je suis preneur.

@+

SirCloud Il y a 2 ans Répondre

Encore une fois mille merci pour ce tuto vachement bien!

selekta Il y a 2 ans Répondre

Cimer c'est super frais !!
La classe,mais dommage que vous fournissez pas le fichier source ca aurait été plus rapide ^^
Mais bon la on apprends au moin"sss" ^^,mais je tiens a dire que c'est pas évident de voir les codes du javascript sur la vidéo mais super bon tuto!!
Et xeron si tu veux toujours le javascript je peux te le passer si tu veux !!
Merci encore a grafikart

Badbart Il y a 2 ans - Répondre

La source est dispo pour ceux qui sont dispo à soutenir l'auteur avec un compte premium

Ravi Il y a 2 ans Répondre

Merci

hellsingblack Il y a 2 ans Répondre

Je vous savoir, quel est le plugin que tu utilise pour les synthaxes automatique, c'est a dire quand tu écris une fonction il te donne le choix entre plusieurs autre qui commence par la même lettre.

AmaSan Il y a 2 ans Répondre

Salut

Bon j'ai une question un petit peu hors sujet mais bon >_<
Je la pose ici car ça sera con ailleurs vu c'est en lien avec ce tuto.
En fait sur ma page html, j'ai 2 menu, un ul de class choix et un de class menugallery (c'est celui ci qui reprend ce tuto) et en fait au niveau du css il y a gros conflit...
Pourtant j'ai bien mis ".choix a li" et ".menugallery a li". J'ai même fait 2 fichier a part...
Si quelqu'un pourrai m'aider...Parce que ça me parait louche que l'on puisse pas définir 2 argument différent pour plusieurs menu différent.

Merci beacoup d'avance et continue ton magnifique travail ^^

@ +

boardingnow Il y a 2 ans Répondre

Superb MERCI

Alex-D Il y a 2 ans Répondre

Dans ce tutoriel vidéos => Dans ce tutoriel vidéo

Xeron Il y a 2 ans Répondre

Salut comme toujours, tout d'abord , supr tuto :D . En plus bien expliqué , seulement je suis vraiment nul au niveau de javascript, si quelqu'un pouvait me passer le code à mettre car je voit rien en plus je confond tout les parenthèses avec les accolades etc... vraie misère j'espèr que quelqu'un pourra m'aider =) .

Merci , et merci pour ce menu , moi qui avait pas du tout d'idée ^^'

asm Il y a 2 ans Répondre

Bravo pour ce tuto encore une fois très utile et très classe

Merci à toi

Cédric Il y a 2 ans Répondre

Merci pour ce tutoriel !! Vraiment super !

Sarathai Il y a 2 ans Répondre

C'est bon, ça marche... Va savoir comment ^^

Sarathai Il y a 2 ans Répondre

Salut,
alors depuis que DailyMotion a changé son player et bien il m'est impossible d'avoir du son sur la vidéo, mais j'ai l'image ^^
Je suis sur Linux Ubuntu..
Help

NiKO Il y a 2 ans Répondre

Aah ben oui, carrément
Sur un 23" ça passe aussi lol.

Baptiste Il y a 2 ans Répondre

as tu activé la HD? il y a un rectangle en hautou tu dois avoir marqué HD is off... Moi ça face nickel sur un 20"!

@+

NiKO Il y a 2 ans Répondre

Il n'y aurait pas un fichier zip avec le contenu de ce tuto de disponible ? Car les vidéos DailyMotion, même agrandie au maximum ne permettent pas de bien lire le code js à taper...

Merci beaucoup d'avance !

hammond68 Il y a 2 ans Répondre

sympa ce tuto !

mais pourquoi tu ne les annonce plus dans la partie blog comme avant ?

pacintosh Il y a 2 ans Répondre

Yep idem, ça tombe bien car je cherchais aussi des idées pour mettre en place un menu stylé

Djiins Il y a 2 ans Répondre

Et bien en forme on enchaine les super tutos en ce moment

leknoppix Il y a 2 ans Répondre

Vraiment sympa ce menu.

likeo Il y a 2 ans Répondre

C'est un peu le même principe que le tuto de la lueur ?

nsink Il y a 2 ans Répondre

Super comme d'hab ! merci

olivier Il y a 2 ans Répondre

Enorme et plutôt simple!
Merci!

Nath Il y a 2 ans Répondre

amusant je suis tombé sur la page demo de ce plugin hier.. vraiment pas mal ce faux flash

Baptiste Il y a 2 ans Répondre

Et bin nickel! tout simple, efficace, et c'est encore un petit truc qui fait la différence!
Bravo et continue a donner ces petits trucs assez simple mais qui changent tout!

@+

Corentin Il y a 2 ans Répondre

TUTO MAGNIFIQUE !!!

zaibon Il y a 2 ans Répondre

Parfait, moi qui devait justement refaire mon menu !

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.