11548 sujets

JavaScript, DOM et API Web HTML5

J'ai site à construire qui a des animations Jquery. Je me demandais juste ce qui serait le plus judicieux et simple. En effet, à chaque fermeture et ouverture de page des éléments s'animent (glissement, fondu) les uns disparaissent tandis que les autres apparaissent.

Faire une monopage impliquant un contenu très, très lourd, mais avec un système de chargement complet dès le début du site ?

Faire plus classique, 1 page = 1 contenu, que je préfère pour le référencement. Seulement comment gérer l'animation d'une page que l'on quitte ? Avez-vous des liens de tutos ?

Merci pour vos conseils Smiley smile
Ma préférence va à 1 page = 1 contenu, mais en utilisant des requêtes "ajax" pour charger les différentes pages, ce qui te permet d'avoir des chargements plus rapide et des animations jquery comme tu veux.
Par contre petite astuce pour ne pas nuire au référencement et à la possibilité de mettre une page en favoris : Chaque page doit être accessible directement sans ajax.

C'est ce que je fais sur mon site et ça marche plutôt bien : j'ai un index avec la barre de titre, le menu, le footer etc. et plusieurs pages html qui correspondent au contenu de chaque page. Quand on va directement sur une page elle est générée en php avec un simple include, mais quand on clique sur un lien il est intercepté par jquery qui lance une requête ajax, charge la nouvelle page, et lance une animation de transition.
Par contre si javascript est désactivé, le lien est du genre "index.php?page=mapage" ce qui permet de l'afficher avec un include php, donc pas de problème pour les robots de référencement qui suivent les liens, et pas de problème pour les visiteurs qui ont désactivé javascript.

Après pour peaufiner tu peux jouer de l'url rewriting pour avoir quelquechose de plus propre que les ?page=mapage, et utiliser l'API history pour que le bouton "retour arrière" fonctionne bien et qu'on puisse bookmarker/partager la page sur laquelle on se trouve.


Voilà, j'espère que ça t'aura donné des idées =)
Merci beaucoup Smiley biggrin . Par contre, question sûrement bête, est-ce qu'avec le système 1 page = 1 contenu on peut animer des éléments de la page et non la page entière ? Un div qui glisse à droite, un body qui s'estompe en fondu ?

Sais-tu où je peux trouver des tutos pour me guider un peu à la base ?
Modifié par letty (15 Feb 2012 - 09:51)
Hello.

Pas de souci pour animer le tout.

Déroulement classique :

- Clic sur le lien
- Appel ajax qui va récupérer le contenu de la page
- Appel du callback success qui se déclenche si la requête s'est faite sans erreur

C'est pendant ce callback que tu vas décider ce que tu vas faire de ton contenu, en l’occurrence dans ton cas l'ajouter au DOM, déclencher ton animation et supprimer l'ancien contenu du DOM.

Ça demande par contre un bon niveau en JS + jQuery/Dojo/MooTools/Insérer ici le framework de votre choix pour être fait proprement.
Ok merci Smiley smile Ça s'éclaircit peu à peu. Mon niveau n'est pas extraordinaire, je me débrouille. Je comprend le code écrit mais j'ai beaucoup plus de mal à le faire moi-même. Mais avec tous les scripts et tuto dont fourmille le web je devrais pouvoir m'en sortir!

Si vous avez de bonnes adresses je suis preneuse