Changement de page fluide

**_Carole** · 17/07/2013, 16h08

Bonjour,
Depuis hier Google et moi recherchons une solution à mon problème, sans y parvenir.

Je plante le décors, Je suis en train de coder mon site pénard, sans PHP, juste du HTML, CSS et Javascript.

Alors, j'ai 5 pages différentes avec un petit menu et tout va bien. Seulement voilà, j'me suis mise en tête d'appliquer un effet la div "contenu", qui est la seule à changer d'une page à une autre.
Un Fade-in quand on arrive, un Fade-Out quand on repart.

Pour le fade-in, j'arrive à me débrouiller avec un "onload" mais alors le fade-out de la sortie... J'en sais rien...

Pour illustrer mon exemple, j'aimerai obtenir une "navigation" de ce genre : http://templates.cms-guide.com/45321/splash (sans l'effet sur le fond de la page, ni même la barre de chargement.. )

Mon code est sommaire côté HTML , mais je met la structure quand même, au cas ou..

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <head>
        [blabla]
    </head>
    <body>
        <div id="content">
            <div id="social">[lien vers les différents réseaux sociaux]</div>
            <div id="title">[en tête du site/bannière]</div>
            <div id="menu">[menu de navigation avec des liens a href tout bête]</div>
            <div id="conteneur">
 
[Cette div change]
 
            </div>
            <div id="pied_page"></div>
        </div>
    </body>
</html>

Voilà, en vous remerciant d'avance des futurs liens vers tutos ou autre

**SylvainPV** · 17/07/2013, 16h51

Un peu comme sur ce site : http://syllab.fr/projets/web/isenconcept.com/# ?

Si le chargement est asynchrone, ça serait en pseudo-code jQuery quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$.get("masouspage.html", function(codehtml){
      divcontenu.fadeOut(1000, function(){
          divContenu.html(codehtml).fadeIn(1000);
      });
});

**_Carole** · 18/07/2013, 08h52

Oui Ce serait quelque chose comme le lien que tu as donné.

Par contre je comprend pas bien ton bout de code.. "Masouspage" sous entends qu'il faudrait répéter ce code pour chaque lien ? (JQuery/Javascript et moi on se connait depuis peu...)

Merci pour ta réponse rapide

Changement de page fluide

JavaScript

Discussions similaires

Partager

Partager