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");
});
}