[Résolu] Animation changement de page

Salut all, j'ai besoin d'aide. Je suis en train de crée un CV Web pour la fin de ma formation..

J'ai crée un style terminal de commande avec un script "TypeWriting.js" que je pense tout le monde connaît ! Mais maintenant j'aimerais poussé l'idée du terminal.

Mon but : J'ai actuellement ma page avec mes infos générale, si je clic sur un onglet, je fait disparaître la page actuelle pour en faire apparaître une autre avec un effet.. L'effet que je veux c'est comme une barre de scanner qui bouge de droite a gauche faisant disparaître la page 1 et apparaître la page 2 ... Je pense qu'il me faut utilisé AJAX mais je n'ai pas encore appris l'AJAX..

Ou peux être un slider géant d'un page a l'autre ? lol
Ou simplement une page qui en recouvre une autre ... Je sais pas par ou commencé ni même cherché du coup ...

Pensez vous pouvoir m'aider ?

Merci d'avance
Modifié par xtorz (11 May 2018 - 16:31)

Il y a plusieurs solutions, plus ou moins complexes. Injecter du contenu via Ajax pour éviter de changer de page est une solution, mais alors quid du SEO ?

Pour quelque chose de simple, tu peux simplement faire passer l'effet "scanner" en loader avec du JS et un peu de CSS.

Par exemple, au clic sur un lien de ton site, stopper l'évènement du lien avec du JS, faire une animation qui met l'opacité de la page à 0 (hop elle disparait, en théorie) à ce moment seulement avec un timeout qui correspond au temps de l'animation CSS, tu re-exécute l'évènement (qui emmène vers l'autre page).

Arrivé sur la nouvelle page, un script qui fait l'effet de scanner s'initialise, et se retire une fois que le document est complètement chargé (ready). Selon l'animation souhaité, tu peux utiliser un bloc qui couvre toute la page, par exemple blanc avec un bord jaune sur la droite, dont la largeur se réduit après le DOM chargé : tu auras l'impression que la ligne du scanner créer le contenu de la page sur son passage.

Il y a surement bien d'autres méthodes fiables, ou de librairies qui gère ce genre de transitions (comme Smoothstate) , mais ça reste une idée "trompe-l'oeil" rapide à réaliser.
Modifié par Nolan (11 May 2018 - 17:12)

Salut Nolan merci pour la réponse, j'ai bien compris ce que tu m'a dit ( du moins je pense ) mais en fait j'ai du mal expliqué mon sujet..

Si je souhaite tout simplement changé de page autant ne rien faire ...
Mais ce que je voulais constitue a crée une div display qui sera juste remplacé par une autre au clic avec une animation.. un slider géant de div avec une barre verte qui crée l’illusion d'un scanner ..

J'ai que deux mois de "cours" dans les mains et le plus gros de mon étude concerne le php donc le JS Jquery et autre sont assez limité pour le moment..

L'exemple que tu ma donné plus ressemble en gros a ça si j'ai bien compris : clic => display + appel de la nouvelle page , une fois newPage arrivé => animation + contenu .. Mais sans AJAX il n'y a aucun intérêt ? Si ? Autant clic sur mon lien et attendre le reload de la page demandé . Non ?

J'suis désolé hein mais j'ai plein d'idée peux être même trop ^^ ..

Il me faudrait une div caché que j'appel au clic via une animation "slider" sans ajax..

Je vise trop haut non ?

Une navbar géante ferait elle l'affaire au pire ? ( degeu mais bon ) ..
Modifié par xtorz (11 May 2018 - 18:15)

D'accord ! Je vois.

Alors pour le coup, je ne m'attarde pas en profondeur sur la méthode utilisée par ce site, car vu le nombre d'éléments et de comportements inline, il est difficile de s'y retrouver. Néanmoins ce que tu cherches à réaliser, ce sont simplement des modals.

Pour ça deux solutions :

Soit tu balances tout ton contenu dans le DOM directement, en masquant les modals à ne pas afficher, et en les affichant au moment voulu (au clic sur un bouton du menu). Néanmoins, cette méthode n'est pas recommandée si tu comptes ajouter du gros contenu dans chaque "page" (modal), car tu vas forcer l'utilisateur à charger beaucoup de contenu qui sera masqué. Et cela risque d'être néfaste, autant pour le SEO que pour les performances du navigateur.

Soit la solution Ajax : avec des données tirées depuis un fichier JSON, ou via une API sur une base de données. Tu créées un container destiné à recevoir les modals, et en fonction de ce que tu sélectionne dans le menu, le script injecte via une méthode ajax un nouveau modal et masque l'ancien (sans le supprimer ! Il est déjà chargé, autant en profiter pour le garder). Et tu en profites pour balancer une animation pendant la transition. C'est toujours du JS.

Ensuite pour le comportement de l'url, j'imagine qu'elle est interceptée en JS, puis que la méthode ciblée par l'Ajax en dépend.

Néanmoins si tu débutes dans le front-end, je peux comprendre que cela peut sembler très compliqué. Tu peux toujours voir si des librairies dispo' sur le net gèrent des modals de la sorte.
Modifié par Nolan (12 May 2018 - 01:06)