De plus en plus, sur Internet, nous trouvons des sites avec des transitions de pages animées. Cela signifie que chaque page est chargée en AJAX puis affichée avec une animation. Il est toutefois très important de conserver une architecture classique (sans JavaScript) fonctionnel, notamment pour les moteur de recherche.

C'est notamment ce que j'utilise sur christophe-coyard.fr, voici également d'autres exemples :

smoothState.js

Pour ce faire, nous allons utiliser un plugin jQuery assez populaire : smoothState.js. Cette librairie est uniquement dépendante de jQuery et se charge de réaliser beaucoup de choses pour nous très simplement.

Fonctionnement

Par défaut, lors d'un changement de page, smoothState.js va réaliser les opérations suivantes dans cet ordre :

  • Au clic sur un lien, on empêche l'utilisateur d'être redirigé vers la page cible
  • Utilisation d'ajax pour récupérer le contenu de la page cible
  • Mise à jour de l'URL et de l'historique du navigateur (avec pushState)

Ces actions par défaut peuvent être modifiées à l'aide de différentes options.

Utilisation

Pour commencer, il faut impérativement qu'il y ait une div générale qui entoure tout le contenu du site, comme dans l'exemple ci-dessous. C'est cette div qui va être initialisée par smoothState.js. C'est pourquoi, il est important de lui donner un id, ici main, pour optimiser les performances.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre du site</title>
    </head>
    <body>
        <div id="main">
            <!-- CONTENU DE MON SITE ICI -->
        </div>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/smoothState.js"></script>
    </body>
</html>

Le contenu du site doit être entourée par une div globale

Après avoir ajouter jQuery et smoothState.js au site, il suffit d'utiliser ce dernier avec le code suivant :

$('#main').smoothState();

Initialisation de smoothState.js

Avec ce code, tout fonctionne directement. Les liens sont maintenant chargés en AJAX.

Options

Le plugin fournit bon nombre d'options pour vous permettre d'aller plus loin dans votre configuration. Elles sont toutes expliquées directement dans la documentation, voici les deux plus importantes selon moi :

Blacklist

Cette option est une chaîne de caractère correspondant au(x) sélecteur(s) jQuery des éléments pour lesquels on ne veut pas que l'effet du lien s'applique. Cela peut notamment être le cas de formulaires qui disposent d'un traitement particulier.

$('#main').smoothState({
    blacklist: 'form.ajax'
});

Désactiver l'effet pour les formulaires ayant la classe ajax

Par défaut, vous pouvez ajouter la classe no-smoothState sur un élément HTML pour activer cette option.

Prefetch

Afin de gagner du temps sur le chargement de la page, il est possible de précharger la page (en effectuant la requête ajax) lors du survol du lien, au clic l'élément sera affiché directement.

Cette option est très intéressante mais risque d'augmenter la charge du serveur. En effet, des appels ajax inutiles risquent d'être réalisés si l'utilisateur survole un lien sans s'y rendre. Il est cependant possible de limiter cet effet avec prefetchOn.

$('#main').smoothState({
    prefetch: true
});

Utilisation de prefetch

Animation

Tout ceci est très bien, mais nos transitions se sont toujours pas animées. Effectivement, le plugin ne se charge pas du tout de cette partie. C'est à nous de définir nos transitions de pages. En effet, smoothState.js nous donne seulement 5 événements à utiliser pour nous permettre de réaliser nos animations.

  • onBefore : lancé avant que la page cible soit appelée
  • onStart : lancé juste après l'appel ajax de la page cible
  • onProgress : lancé si l'appel de la page cible est terminé et que les animations onStart ne sont pas terminées.
  • onReady : lancé lorsque le contenu de la page cible est prêt à être ajouté sur la page et que les animations précédentes sont bien terminées.
  • onAfter : lancé après que le contenu de la page cible ait été injecté sur le site et que toutes les animations sont terminées.

Ainsi, pour christophe-coyard.fr, j'utilise seulement deux événements de la façon suivante :

$('#main').smoothState({
    onStart: {
        duration: 250,
        render: function($container) {
            $container.addClass('loading');
        }
    },
    onAfter: function ($container, $newContent) {
        $container.removeClass('loading');
    }
});

Ajout et suppression d'une classe loading à $('#main') pour effectuer l'animation

Ce code se charge simplement d'ajouter la classe loading à notre élément #main au début du chargement puis de le retirer lorsque le nouveau contenu a été injecté sur la page.

L'animation est ainsi réalisée en css par ce petit bout de code.

#main {
    opacity: 1;
    transition: opcity 0.25s;
}
#main.loading {
    opacity: 0;
}

Animation en fade sur une durée de 250ms

Cette animation est plutôt simple mais il serait tout à fait possible d'en imaginer des beaucoup plus complexes ou bien même en développer en JavaScript.