Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment créer un scroll horizontal pour votre site web qui nous permettra de naviguer, en transition animée, sur 3 parties distinctes de notre site.

Nous ajouterons un menu qui sera toujours visible en haut du site et qui nous permettra lors du clic de souris, de déplacer horizontalement la scrollbar ainsi que l'onglet "actif"

Tous les fichiers sources sont fournis. Bon tuto !

Jetez un oeil à ces autres tuto jQuery 1.7

Redirection avec compte à rebours en JqueryRedirection avec compte à…
Dans ce tuto jQuery en vidéo nous verrons comment mettre en…

Créer un accordéon horizontal pour vos derniers articlesCréer un accordéon horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…

Créer un Sticky menu qui reste visible à tout instantCréer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir…

Animer la hauteur d'un élément pour dévoiler un contenuAnimer la hauteur d'un élément…
Dans ce tuto jQuery en vidéo, nous allons voir comment animer…

Créer un site web avec un slider d'images en full pageCréer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…

Créer un slider et l'intégrer à votre blog WordpressCréer un slider et l'intégrer…
A l'aide d'un plugin jQuery, nous allons créer un slider pour…

Créer une lightbox simplementCréer une lightbox simplement…
Dans ce tuto Jquery en vidéo, nous verrons comment créer une…

Ajouter une bulle d'info enrichie à votre siteAjouter une bulle d'info enrichie…
Dans ce tuto jQuery en vidéo, nous allons voir comment créer…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.7 de 21 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

spykrew07 , formateur certifié

Salut à tous ! Je m'apelle Adrien j’ai 29 ans et je suis Webdesigner spécialiste WordPress depuis 7 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 4 ans et depuis 3 ans je me suis lancé en freelance. Formateur certifié sur tuto.com, je partage mes connaissances et mes découvertes dans différents domaines : web design, logo, html, wordpress, php, css jquery ... Ma devise : Webdesign is not a job, it’s a passion !

Toutes les formations de Spykrew07


Témoignage des clients de spykrew07

Je trouve que Spykrew07 est un très bon formateur !

Très bon formateur !!!

tutos clair et précis!

Très bien, de bonnes explications très précises. Un bon rythme pendant les tutos

Tuto utile et super précis ! Merci

Lire les autres témoignages

 

D'autres tuto de spykrew07

Ajouter une bulle d'info enrichie à votre siteAjouter une bulle d'info enrichie à votre site
Dans ce tuto jQuery en vidéo, nous allons voir comment créer une bulle d'info enrichie…

Créer une typo déstructurée avec des impacts de ballesCréer une typo déstructurée avec des impacts de balles
Dans ce petit tuto vidéo Photoshop, nous allons créer un effet de typo déstructurée…

Apprenez les bases du CSS pour intégrer votre site webApprenez les bases du CSS pour intégrer votre site web
Dans ce tuto vidéo sur les bases du CSS, nous verrons ensemble les propriétés essentielles…

Installation & Tour d'horizon de l'admin de WordpressInstallation & Tour d'horizon de l'admin de Wordpress
Dans cette 1ère partie consacré à la création d'un thème WordPress complet pour…

voir tous les tuto de spykrew07

Notes attribuées par les utilisateurs (10 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (21)

par spykrew07
(auteur de ce tuto - 16 octobre 2013)

" @hebus_ Il faut mettre un text-align:center sur le div qui contient les h2, p ... tu me diras si ça marche correctement, bye ;) "

par hebus_a voté :
(a acheté ce tuto - 16 octobre 2013)

" Bonjour,

Ce tuto est très clair, le formateur s'exprime très bien et donne tous les détails nécessaires pour la compréhension de chaque étape.
En revanche, je rencontre juste un petit problème, je n'arrive pas à centrer le texte (enfin les balises <h2> et <P>). Merci pour votre aide. "

par manchoua voté :
(a acheté ce tuto - 08 avril 2013)

" Très bien, comme toujours! Complet, simple clair et précis! "

par nabilovica voté :
(a acheté ce tuto - 28 mai 2012)

" bsr adriane jai une question est ce que en peut faire une navigation horizontal et vertical en meme temps voila un example pour que comprendre bien ma question http://www.aldercass.com/#portfolio.
"

par iorbita
(a acheté ce tuto - 16 avril 2012)

" ... merci pour la réponse. :o) ... mais j’ai quand même un doute, comment adapter les marges du contenu de la <div> suivante par rapport à un écran de 1280px par exemple et un autre écran qui lui fera 1920px? Avec d’aussi grands écarts de pixel on verra toujours le début de la <div> suivante... "

par spykrew07
(auteur de ce tuto - 16 avril 2012)

" @iorbita Si tu penses que c'est pas assez tu mets +, par exemple 1680px mais n'oublies pas de multiplier ce chiffre par le nombre de pages que tu veux avoir et de le reporter dans la largeur de ton body. "

par iorbita
(a acheté ce tuto - 15 avril 2012)

" Bonjour,
...heu... et pour les résolutions d'écrans au delà des 1500px? "

par Benjezrep
(a acheté ce tuto - 11 mars 2012)

" Je trouve ce tuto excellent.
Cependant j'ai une petite question.
Peut-on mettre tout le contenu que l'on voit à l'écran dans un div avec une largeur de 600px par exemple ?
Dans un site en cours de réalisation, je veux mettre un fond défini dans le body et avoir toute l'animation de ce tuto dans un div de la largeur que je veux.

Merci d'avance "

par spykrew07
(auteur de ce tuto - 09 mars 2012)

" @nabilovic de rien, ravi qu'on est trouvé la solution à ton problème ! "

par nabilovica voté :
(a acheté ce tuto - 08 mars 2012)

" ahhhhh oui c vrais jai pas fait attention a ca c bon ca marche nickel merci bcp adriane .... "

par spykrew07
(auteur de ce tuto - 08 mars 2012)

" @nabilovic Est ce que tu as modifié la largeur du body en fonction de ta page en + ? Car dans le tuto, on met 4500px pour des pages qui font chacune 1500px, tu devrais avoir 6000px si tu en rejoutes une... Je ne vois pas ce que ça peut être sinon car le nombre de pages n'est pas limité et si ça fonctionne pour 3 alors ça devrait être pareil pour 4. Bon courage ! "

par nabilovica voté :
(a acheté ce tuto - 08 mars 2012)

" " merci pour ce suberb tuto bien explique comme dabe j'ai juste un petite problème ..je veut faire 4 page sur mon menu mais quand je click sur le 4eme il me renvoie a la page daccueil ça marche juste sur 3 page et j'ai meme recopie ton code tjr le meme proleme ….SOS " "

par philseba voté :
(a acheté ce tuto - 20 février 2012)

" Nickel! Simple et clairement expliqué. Un tutoriel utile. "

par chouchou59a voté :
(a acheté ce tuto - 19 février 2012)

" Merci pour ce tuto, d'habitude les autres que j'ai reproduits se sont parfaitement déroulés mais pour celui-ci, rien à faire, la partie jquery ne passe pas.
A bientôt pour un nouveau tuto.
Cordialement. "

par Lethala voté :
(a acheté ce tuto - 14 février 2012)

" Toujours trés clair, merci ! "

par spykrew07
(auteur de ce tuto - 03 février 2012)

" @mezigh Je vais méditer la dessus promis !! Un tuto sortira bientôt sur ce sujet ;) "

par lottaviania voté :
(a acheté ce tuto - 01 février 2012)

" Cool! Effectivement ça ouvre des perspectives intéressantes de défilement (Notamment avec des objets placés avec effet paralaxe--&amp;gt;A creuser...)
Puis même remarque que l'ami Krislec, donc je file sur la méthode load() et on en reparle... "

par mezigha voté :
(a acheté ce tuto - 01 février 2012)

" salut
Encore bravo pour ce tuto et l'ensemble de ton travail. J'ai déja acheté le tuto de la methode load ()
et j'ai posté un commentaire sur l'utilisation des boutons précédent/suivant du navigateur. Je te fais donc la même remarque . En l'etat d'un point de vue SEO les moteurs de recherches ne connaissent qu'une seule page !? Et ça c'est pas très bonne pratique. Je suis développeur AS3 et je m'impose l'utilisation de SWFAdress et du SEO friendly. Je crois qu'un tuto sur cet aspect va devenir une urgence car le travail que tu propose donne un impact visuel SUPER POSITIF, mais il me semble que l'on parle ici de WEB et qu'avant de pouvoir être VU il faut que l'on puisse nous TROUVER sur la toile.
Je suis convaicu qu'un tuto sur l'aspect barre de navigation , bookmark et utilisation prev/next sera un best seller

A j'attends le tuto sur l'aspect navigateur avec beaucoup d'impatience
Oliv "

par jeanalba voté :
(a acheté ce tuto - 31 janvier 2012)

" merci "

par spykrew07
(auteur de ce tuto - 31 janvier 2012)

" @krislec On touche à l'ajax après pour charger d'autres contenus mais c'est faisable bien sur.

Pour faire simple, on peut utiliser la méthode .load() qui peut t'aider à charger du contenu d'autres pages avec une ligne de jquery. Tu peux regarder mon tuto la-dessus si ça t'interesse.

Merci de ton retour ;) "

par krisleca voté :
(a acheté ce tuto - 31 janvier 2012)

" Super Sympa ce tuto. Clair, net et précis. Cependant, une critique. N'est-il pas plus intéréssant de faire un scroll horizontal sur les pages plutöt que sur les liens. Dans votre exemple on est obligé d''avoir tout chargé sur le même page html.

Quant est-il pour réaliser ce même effet sur des liens qui généreraient des autres pages, autrement des accès serveur ?

D'avance merci.

K. "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto jQuery 1.7 d’une durée de 21 minutes a été acheté 244 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 30 janvier 2012 par spykrew07, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,8/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto jQuery Navigation.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !