Sliding effect entre page indépendante

Bonjour à tous.

Déjà un petit mot pour dire que je suis nouveau , et que j'ai entendu parler du site par un ami me disant du grand bien de cet endroit. Aussi aujourd'hui, dans le but d'aider mon prochain et, à l'instant, d'être aidé, je me joins à votre communauté ( ou du moins j'essaie héhé ).

Mon problème ?
Hé bien voilà. Je code un site et je cherche très activement une solution pour pouvoir effectuer un effet de slide horizontal ( dans un seul sens ) entre mes pages qui sont des pages statiques très distinctes (donc plusieurs fichiers php).

Grand désespoir qu'est ma vie, je débute vraiment à peine en javascript et jquery et je suis totalement perdu. J'ai réussi avec beaucoup de peine, en cherchant, à faire un effet de sliding entre pages.

http://www.woomw.org/WTF/agence_wtf.php
Voici mon site actuel.

http://www.vitosalvatore.com/#aboutme
Voici un exemple d'effet voulu mais avec des transitions plutôt horizontal. Le but étant donc que, dès que je clique sur une balise "a", d'avoir un slide horizontal de droite à gauche avec la nouvelle page qui rentre, et celle actuelle qui sort.

Si quelqu'un peut m'apprendre un code pouvant faire ça et l'analyser pour le comprendre ça m'aiderai grandement.

Merci d'avance et je vais voir si je peux aider des gens dans le besoin !

Bonsoir,

Je n'aurais pas le temps de sortir du code, mais par contre, pour t'aiguiller un peu (sachant que le "slide horizontal" n'est pas ce qu'il y a de plus commun comme navigation, je vais te donner des pistes.

Juste un détail, le site que tu donne en exemple, à tout sur la même page, il ne fait appel qu'à de simple ancre html, avec un effet sur le scroll pour y arriver (de mémoire, un plugin jQuery permet de faire ça "scrollTo").

Mais pour ton cas, avec chaque page indépendante, si tu veux avoir le même effet, aussi "smooth", il va falloir passer par l'ajax, et jQuery pour ça est excellent, très simple à mettre en place.

Ensuite, pour l'effet de "slide horizontal" (pour faire arriver de la droite/gauche haut/bas ton bloc), tu peux utiliser le plugin "jQuery UI" avec uniquement les effets (depuis cette page, tu désactive tout, et ne prends que les "effects", qui contiennent le slide horizontal par exemple (voir cette page)

Voilà, bon courage, et amuses toi bien !

Merci de me répondre aussi vite. J'ai oublié de préciser que je n'utilise aucun CMS et que je n'ai donc pas de framework.

Le premier lien, sincèrement, plus je regarde, moins je comprend :S
Le deuxième lien est intéressant mais est-il possible de faire un effet smooth avec ?

L'intérêt de ce slide serait en fait de voir le contenu défiler mais la bande permettrai un effet intéressant en fait :O On aurait l'impression que la ligne reste statique.

jQuery n'est pas un CMS non plus

Le premier lien, permet de télécharger tout ou partie du gros plugin jQuery UI qui permet de faire beaucoup de chose en plus de jQuery tout seul.

Je comprends l'intérêt du slide que tu souhaites donné, mais ça ne sera pas simple à mettre en place si tu débute.

Grosso merdo :

- Lors d'un clic sur un lien, faire glisser vers la droite/gauche le bloc de contenu (hide('slide',..;)
- Puis lancer une requête Ajax (avec load() par exemple)
- Sur cette requête Ajax, faire un callback (fonction exécuté en fin d'appel), qui viendra faire glisser le contenu (show('slide', ...;)

C'est terminé.

Ce que ça implique, c'est que je suppose que chaque fichier appelé contient la totalité du site ? Sauf que ce qui t'interresse c'est uniquement le contenu.

Alors il faudra, lors de l'insertion du contenu en ajax, soit transmettre un paramètre à la page, et n'afficher que le contenu pur sans le reste autour, soit s'amuser à supprimer de la DOM de la page chargée, mais ça, c'est moche.

L'effet smooth, je voulais dire "fluide" hein
Modifié par Super_baloo8 (04 Dec 2012 - 22:20)

Tu as vu juste, chaque fichier contient la page. Aussi ça ne m'embête pas que chaque page slide dans sa globalité. Je veux pas faire un truc trop compliqué, juste un slide fluide entre page

Le problème, c'est que le code de ton script qui fait ça côté client s'en irai lui aussi, pas fiable

Vu comme c'est parti, je vais me rabattre sur l'option Fade In et Fade Out, ça a l'air super dur a mettre en oeuvre le slide, surtout que je dois avoir faire ça avant mardi :O

Salut.

Woodeath a écrit :
Grand désespoir qu'est ma vie, je débute vraiment à peine en javascript et jquery et je suis totalement perdu
...
http://www.woomw.org/WTF/agence_wtf.php
Voici mon site actuel.

Je ne comprend pas.
Vous vendez des sites mais vous ne savez pas les faire ?
WTF...

En fait, je suis en Licence Webdesign et j'ai plus un profil graphiste. Le code je suis loin d'être un expert. Mais c'est moi qui m'y colle.

Le site que je code c'est pour un projet ( cours ) et je n'ai jamais utilisé le javascript/jquery avant. Donc c'est un peu la découverte XD .

Woodeath a écrit :
En fait, je suis en Licence Webdesign et j'ai plus un profil graphiste. Le code je suis loin d'être un expert. Mais c'est moi qui m'y colle..

Ok tout s'explique.
Mais à voir votre site, celui d'une agence web on dirait, on pourait croire que vous êtes un lead développeur qui semble bien perdu

Je croi que la repônse a déjà été donnée ici, c'est à dire qu'utiliser une library JS telle que jQuery ou Mootools, ou autre, c'est bien quand on sait déjà se débrouiller avec javascript, ou qu'au moins on en a de bonnes notions.
dans le cas contraire, vous risquez de patauger dans la semoule, si je puis me permettre l'expression, pour arriver à un résultat hasardeux et malencontreux

Sinon, je ne peux pas répondre à la question initiale, mais j'aimerai moi aussi bien avoir une réponse.
En tout cas, bon courage

Marcolet a écrit :

Ok tout s'explique.
Mais à voir votre site, celui d'une agence web on dirait, on pourait croire que vous êtes un lead développeur qui semble bien perdu

Je l'avoue sans honte. J'ai plus un profil graphiste mais j'ai décidé de retourner vers plutôt le codage. Mais c'est avec peine même si ça me plait. Ce qui est sur, c'est que je vais revoir tout javascript .