Discussion :

[Mister Paul]

Bonjour,

j'aurais besoin de votre expertise…

Je ne sais pas si c'est lié au javascript ou au css mais j'aimerais savoir comment se fait le scroll horizontal de ce site. Pas le diaporama de l'accueil mais celui de la navigation vers les éléments du menu.

Car en général avec les scrolls vers des ancres on a tout le défilement des parties successives de la page. Pas ici où on arrive directement à l'ancre souhaitée.
(il y a juste un effet qui ressemble à un défilement quand on revient à l'accueil mais ce sont les slides du diaporama qui donnent l'impression…)

Merci
PAul

[SpaceFrog]

affichage>source ou visualisation des scripts dans la console firebug de firefox
=> c'est la librairie JQuery qui est utilisée
les animation sont faites au moyen de plugins et autres animate de jQuery.

[Mister Paul]

Oui effectivement je vois JQuery.

La librairie intervient j'imagine (j'ai du mal à décortiquer tout ça...) au minimum dans les transitions :
celles du slider de l'accueil et vraisemblablement aussi dans celles de la navigation des pages du menu.

Mais je ne comprends justement pas comment globalement est gérée cette navigation...

Je croyais que tout était sur une "single page" et qu'on naviguait avec des ancres. Mais je ne comprenais pas comment on ne voyait pas de déroulé complet (avec les contenus intermédiaires qui repassent devant quand on passe d'un élément à un autre très éloigné) : à chaque fois c'est comme si la page/l'ancre était juste à côté. Et je ne comprends toujours pas d'ailleurs...

Je viens juste de comprendre que le contenu de chacune de ces pages est sur une page html extérieure...

Tu y vois clair dans cette navigation ?

[SylvainPV]

Sans avoir regarder les sources, il est facile de positionner les slides aux positions que l'on souhaite pour toujours avoir de bonnes transitions. Le fonctionnement doit probablement être au clic :
- chargement en AJAX du HTML en fichier eterne
- ajout du HTML dans un cadre
- positionnement de ce cadre en dehors de l'écran (left:100% par exemple)
- animation jQuery pour faire venir le cadre à l'écran avec la transition

A priori ces gens n'ont pas utilisé de librairie particulière mais ont codé leur propre système de slides. Les bouts de code propres à cela sont ici :
http://www.julie-lavergne.com/js/home.js
cf fonctions selectSlide et setSlidesSize

Pas super lisible mais ces gens maîtrisent leur sujet, pas de doute.

[Mister Paul]

C'est comme cette page.

Elle semble faite sur le même principe :
- une seule page
- on navigue d'ancre en ancre avec un lien #

Je crois comprendre que le code qui permet de gérer cette page est (?...) base.js mais comme il est compressé je n'y comprends malheureusement rien...