Discussion :

[infovect]

Bonjour
Je suis totalement d�butant dans le javascript et jquery mais je cherche � faire une transition "fade" au changement de page auriez-vous une solution � m'apporter svp merci

[SylvainPV]

Bonjour,

Cela implique plusieurs choses :
- tout d'abord de charger ses pages en AJAX, et non par des liens classiques. Un lien classique recharge toute la page instantan�ment, ce qui se traduit par un �cran blanc, puis l'utilisateur voit la page "se construire" du fait du chargement progressif de ces �l�ments.
- si la page charg�e contient d'autres �l�ments � charger (images, feuilles de style, iframes...), il faut pr�charger ses �l�ments avant de lancer l'animation de fondu l� encore pour �viter que l'utilisateur voit les �l�ments charg�s au fur et � mesure.

La mani�re la plus simple d'appliquer ce fondu est d'utiliser une transition CSS sur la propri�t� "opacity" de body

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
body { opacity: 1; transition: opacity 0.5s; } /* délai du fondu à ajuster ici */
body.fading { opacity: 0; }

Ensuite, la logique de code JavaScript serait de cet ordre l� (j'utilise jQuery pour simplifier ici mais on peut bien entendu s'en passer):

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
function loadPage(url){
document.body.classList.add("fading");
var $temporaryPageContainer = $("<div class='page'></div>");
$temporaryPageContainer.load(url, function(){
   $('body').empty().append($temporaryPageContainer);
   document.body.classList.remove("fading");
});
}