Faire une transition animée entre ses pages

Vous voulez rajouter en effet un peu stylé sur votre site WordPress, histoire d’avoir des transitions ultra-smooth entre vos pages ? Dans ce tutoriel, on regarde comment faire une transition entre les pages sur WordPress, sans plug-in, avec juste un peu de code.

Faire une transition entre les pages avec un preloader ?

Ça faisait un moment que je pensais à mettre quelque chose en place pour ajouter une transition entre les pages, mais les solutions sur WordPress ne sont pas courantes.

La plupart du temps, on va trouver ce qu’on appelle des « preloaders », c’est-à-dire des modules qui vont ajouter une animation le temps que la page charge.

Bon, déjà, c’est la lose, puisque ça veut dire qu’on a des temps de chargement tellement long qu’on est obligé d’ajouter une animation pour faire patienter les visiteurs. Et ça, c’est pas du tout en phase avec la politique de la maison, car ici, les temps de chargement, on n’aime pas ça.

Non, ce que je voulais, c’était bien un effet de transition entre les pages. Pas une animation à la con qui se positionne le temps que ma page charge. Mes temps de chargement, sur digital cookie, ils sont quasi-inexistants, donc tout ce que je pouvais trouver en matière de preloader, ça ne collait pas avec mon besoin.

Du côté des extensions

Il y a très peu d’extension pour ajouter une transition entre les pages sur WordPress. J’en avais trouvé une, Easy page Transition, que j’ai utilisé sur GDM-Pixel, un peu par curiosité, mais cette extension n’a pas été testée avec les trois dernières versions majeures de WordPress, et elle n’est très certainement plus maintenue.

Un jour, ça cassera, c’est sûr.

J’en suis arrivé à la conclusion que ce qui me fallait, au final, c’est un truc codé à la main, et le plus léger possible.

Et un jour, pendant la pause de mes étudiants, j’ai fait une petite recherche sur Google, et j’ai trouvé ça :

https://github.com/TylerPottsDev/js-page-transitions-basic/blob/main/main.js

Une fois rentrée, je teste, et ça fonctionne plutôt bien. Mais il reste encore à optimiser le code, car, comme on va le voir, c’était pas vraiment fait pour tourner sur un CMS. Après avoir retravaillé un peu le contenu, j’ai un truc 100 % opérationnel, sur-mesure, et qui ajoute bien une petite transition entre les pages.

Ce qui est beau, c’est que dedans, vous mettez ce que vous voulez.

On regarde le code d’un peu plus près.

Le code HTML

Ici, rien de bien sorcier, il suffit juste de rajouter ce bout de code juste après la balise ouvrante du body.

<div class="digital-transition is-active">VOTRE CONTENU</div>

Ça va simplement ajouter un conteneur, avec ce qu’on veut dedans. Ici, j’ai simplement ajouté le logo de l’entreprise, sur un fond avec une des couleurs de ma charte graphique. Mais en fait, vous pouvez faire ce que vous voulez.

A noter que le conteneur est chargé avec une opacité à 1, et que le script, quand la page charge, retire la classe qui gère cette opacité (.is-active)

Le code CSS

Là, il y a un peu plus de choses à dire. Comme on le verra par la suite, le code JavaScript va juste rajouter/retirer une classe supplémentaire (.is-active) pour créer l’effet de transition.

Donc, grosso modo, la boîte est en position fixe, ancrée dans les quatre coins de l’écran, avec un z-index élevé pour se retrouver par-dessus tous les éléments du body.

On lui colle une couleur de fond, une opacité à zéro, et, le plus important, une propriété « pointer-event : none », et une durée de transition de 300 ms (avec un peu de Easing).

Pour le reste, c’est juste un peu de code pour centrer mon image à la fois horizontalement et verticalement.

.digital-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    background-color: #202633;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-out;
    display: flex;
    font-size: 50px;
    font-weight: 700;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  
}
.digital-transition  img {
        max-width: 250px;
        margin: 0 auto;
}

.digital-transition.is-active {
    pointer-events: all;
    opacity: 1;
}

Le javascript

Pour commencer, on crée le contexte pour lancer la fonction, c’est-à-dire quand le document est chargé (winow.onload).

Ensuite, on va ajouter une constante « anchors », qui va cibler tous les éléments pointés dans le document. À la base, sur le script d’origine, c’était tous les liens. Et du coup, ça peut mettre le bazar, si vous avez des liens ancrés, ou si vous voulez que certains liens ne déclenchent pas l’effet de transition.

Donc ici, soit vous allez cibler un lien de manière plus précise, avec par exemple certaines classes CSS, soit, au contraire, vous ciblez tous les liens qui n’ont pas certaines classes. C’est ce que j’ai fait ici : les liens qui déclenchent les fancy-box, les scroll, les toggle etc. ne sont pas pris en compte.

Pour ça, vous utilisez un sélecteur CSS « :not », qui va donc sélectionner tout SAUF (et vous mettez ici la liste de classes qui ne doit pas déclencher l’animation).

Dans mon cas :

a:not(.smooth-scroll, .skip-transition, .dc-fancybox, .ez-toc-link, .ez-toc-toggle, .ez-toc-btn)

Ensuite, on rajoute une autre constante, pour sélectionner le conteneur qui contient le calque de transition (ici : « .digital-transition »).

Ensuite, on crée un timeout pour retirer la deuxième classe CSS « .is-active » qui rend le conteneur opaque.

Quand la fenêtre charge, on retire la classe « is-active » qui crée l’opacité.

Du coup, on retombe juste sur « .digital-transition », avec mon opacité à zéro, aucun clic possible sur la boite, donc on retrouve bien le fonctionnement « normal » de tous les éléments qui sont « derrière ».

Ensuite, dans le JS, on lance la boucle qui va cibler tous les liens qu’on a déclarés dans notre première constante, en ajoutant un écouteur d’événements (le click).

Le code JS est ci-dessous (il faut être inscrit sur le site pour pouvoir le copier).

Et du coup, quand on clique sur un lien qui est ciblé par notre fonction :

• On ajoute un délai de 300ms à l’exécution du click
• On récupère l’adresse ciblée par le lien (« let target = e.currentTarget.href; »)
• On ajoute la classe « is-active » à notre conteneur de transition pour le faire apparaitre («transition_el.classList.add(‘is-active’); »)
• On envoie la fenêtre sur l’adresse du lien

Du coup, on a une jonction parfaite entre les pages :

• Le clic fait apparaitre mon conteneur de transition sur ma page d’origine
• Ma page de destination charge et son conteneur de transition est visible
• Le script retire la classe qui rend le conteneur de transition visible et on peut voir la nouvelle page apparaitre

C’est ultra-smooth, et ça permet en outre de pallier aux petits problèmes de FOUC (Flash of unstyled content) qu’on peut avoir sur certaines pages avec des optimisations agressives.

Voilà, vous n’avez plus qu’à copier le code que je vous ai mis plus haut et tester ça sur votre site 😊