Transition entre les pages
Ajouter du style à la navigation entre la page est la recette d’un design fini est soigné. Cela rajoute une touche de douceur et de style dans le changement de page.
L’animation de changement de page, c’est qu’il manque a votre site pour le faire passer dans la dimension du bon webdesign.
Pour effectuer les Transitions de page en animation, il nous faudra utiliser du CSS et JavaScript.
La transition de page animée, comment ça fonctionne ?
Pour schématiser, nous allons créer une animation CSS qui va se jouer en quittant la page et en arrivant sur la page suivante. Pour l’exemple nous allons réaliser un simple fade in / fade out, mais vous pouvez faire ce que bon vous semble avec les animation CSS, utiliser du clip-path, du Scale des filters pour rendre vos animations vraiment cool.
Et l’astuce, c’est de retarder avec le JavaScript l’affichage de la page suivante pour pouvoir lire l’animation CSS. Il nous faudra bloquer le comportement classique du lien et différer son effet.
Un exemple de transition animé.
Sur cet exemple, nous allons mettre entre les pages une animation de « fade in / fade out » ou fondu au noir / fondu au blanc.
Dans un premier temps, il nous faut construire une div fantôme, elle sera là, invisible, attendant patiemment le changement de page pour dérouler son animation.
Pour se faire créons une <div> vide juste après l’ouverture de la balise <body>, et ça sur toute les page ou l’on veut que l’animation se joue.
Nous allons lui donner deux classes. Une pour donner son état initial invisible (transition) et une autre qui va donner le deuxième état de l’animation (active).
Pour le HTML :
<div id="transition_page" class=" transition active"></div>
et pour Le CSS :
.transition{
position: fixed;
width:100%;
height:100%;
background: #222222;
z-index: 1;
opacity: 0;
pointer-events: none;
transition : ease-in 0.4s;
}
.transition.active{
opacity: 1;
pointer-events: none;
}
Les choses a retenir :
- La position en « fixed », pour prendre tout l’écran mème au scroll.
- L’opacité à 0 et en active à 1 permettra plus tard en JavaScript d’animé en fonction de l’ajout ou non de la classe.
- Le pointer-event, comme mentionné dans notre article « Le curseur personnalisé » il permet d’annuler son action sur clic, cette fonction ajoutée à une div permet de passer au travers avec sa souris pour atteindre un lien ce qui rend notre div intouchable en plus d’être invisible. Pour la classe « active » nous allons par contre bloqué toutes les actions de la souris sur cette div.
- La transition, un classique de ‘animation CSS permet d’ajouter une vitesse à l’animation ainsi qu’une courbe d’accélération.
Maintenant un peu de JavaScript
Pour bien fluidifier cette animation il est impératif de mettre une partie de l’animation sur la page que l’on quitte et reprendre sur la page sur laquelle on arrive.
1ère étape, il nous faut ajouter l’effet et donc supprimer la classe « active » qui affiche et masque le contenu de la page, après un temps donné, le temps nous le connaissons, car nous l’avons choisi dans le CSS avec la durée de notre transition (0.4 s).
const transition = document.querySelector(".transition")
setTimeout(function(){
transition.classList.remove("active")
}, 400)
À cette étape notre animation fonctionne, car a chaque changement de page il y a une animation qui se joue, nous pourrions presque nous arrêter là, mais il manque quelque chose la transition de départ.
2ᵉ étape, la transition de départ. Il nous faut donc capturer le clique sur le bouton du menu et lui demandé d’attendre un peu, pour jouer l’animation de départ.
// on sélectionne les liens de pages qui joueront l'animation
const liens = document.querySelectorAll('nav a')
for(i=0; i< liens.length; i++){
let lien = liens[i]
// on écoute le clic sur ces liens
lien.addEventListener('click' , function(event){
//on empêche le lien de nous diriger vers une autre page
event.preventDefault();
//on ajoute alors la classe "active" pour ajouter le fondu au noir
transition.classList.add('active')
})
}
3ᵉ étape, il nous faut stocker puis rediriger, une fois l’animation de départ effectuée, vers la nouvelle page (toujours en restant dans la boucle for).
// connaitre sur quel lien a etait cliqué
lienclic = event.target.href
//On attend un peu que l'animation et se joue et on dirige vers le lien
setTimeout(function(){
window.location.href = lienclic
}, 400)
Ce qu’il faut retenir de cet exemple, c’est que pour avoir cet effet une animation est lancé à l’arrrivé sur la page et a sa sortie. Et que c’est l’ensemble de ses deux animations qui donne cet effet.
Quelques améliorations
Cet exemple est vraiment basique, il est de bon ton de l’améliorer un peu. En effet, si votre page est un peu lourde a chargé il est important de lancé l’animation dès le début du chargement. Donc englobé votre code JS d’un « window.onload ».
Pour l’animation, on retrouve souvent les classiques comme le fade/in fade/out, les transitions de la gauche vers la droite… De haut en bas, qui reste très efficace est facile a utilisé, mais n’hésitez pas à aller plus loin dans l’animation sans en faire trop.
josuao