Animations pleine page avec CSS

IEBlog Français

Blog de l'équipe de développement de Windows Internet Explorer

Animations pleine page avec CSS

  • Comments 0

Depuis la version 9, Internet Explorer prend en charge les transformations 2D CSS. Internet Explorer 10 Developer Preview étend cette prise en charge aux transformations 3D CSS et aux animations CSS. En exploitant la puissance du processeur graphique et en lançant une exécution asynchrone par rapport au code JavaScript standard, ces fonctionnalités d'IE10 offrent une solution plus performante et plus flexible que les animations traditionnelles des contenus Web, généralement basées sur des scripts.

Dans de précédents billets de blog, nous avons évoqué les transformations 3D CSS, ainsi que les animations et transitions CSS. Dans ce billet, nous présentons un cas d'utilisation moins courant de ces technologies, en décrivant le concept « d'animation pleine page ». Ces animations peuvent être utilisées au cours de la navigation pour ajouter plus de fluidité et de continuité à la navigation Web. Notre objectif est de parvenir à une expérience de navigation transparente, au sein de laquelle le contenu apparaît à l'écran de façon fluide lorsque l'utilisateur accède à une page et disparaît de façon tout aussi progressive lorsque l'utilisateur clique sur un lien ou effectue une action pertinente.

Ces effets peuvent être obtenus en transformant l'élément HTML <body> au moyen d'animations CSS. Cependant, ce cas d'utilisation présente un certain nombre de spécificités qu'il nous semble utile d'aborder plus en détail. Il nous semble notamment judicieux d'examiner l'effet de la disposition et du dimensionnement sur la transformation de l'élément <body>, et d'étudier comment enchaîner les navigations de page de façon adéquate pour qu'elles s'intègrent parfaitement avec les animations.

Les exemples de code présentés dans ce billet utilisent le balisage CSS sans préfixe pris en charge par IE10 Release Preview. D'autres navigateurs nécessiteront peut-être des préfixes d'éditeur pour les propriétés des animations et transformations CSS utilisées.

Transformation de l'intégralité du contenu d'une page

Les transformations CSS sont définies dans les propriétés de style d'un élément DOM HTML. Par exemple, le code suivant permet de faire pivoter un élément de 45 degrés le long de son axe Z :

#element {

transform: rotateZ(45deg);

}

Pour associer une transformation à l'élément <body> de votre document HTML, le principe est identique. Pour ajouter de façon déclarative le même effet à l'élément <body> de votre document, vous pouvez écrire le code suivant :

body {

transform: rotateZ(45deg);

}

Examinons une page avant et après l'application d'une transformation à l'élément body :

Capture d'écran montrant l'application d'une transformation rotateZ(45deg) à l'élément body d'un document
Application d'une transformation rotateZ(45deg) à l'élément body d'un document.

Pour les transformations en trois dimensions, la spécification des transformations CSS définit la propriété perspective, qui peut être spécifiée sur le parent de l'élément transformé. Lorsque vous transformez l'élément <body> de votre contenu, il doit être appliqué à l'élément <html> qui se trouve au-dessus dans la hiérarchie DOM. Pour ce faire, la procédure est simple :

html {

perspective: 500px;

}

En associant ce code à une transformation rotateY(45deg) appliquée à l'élément <body>, vous aboutissez au résultat suivant :

Capture d'écran illustrant l'application d'une transformation rotateY(45deg) à l'élément <body> avec perspective: 500px défini sur <html>
Application d'une transformation à l'élément <body> avec perspective: 500px défini sur <html>.

Nous pouvons manipuler la propriété transform-origin de l'élément body pour obtenir des résultats intéressants. Examinons quelques exemples :

body {

transform-origin: 50% 100%;

transform: rotateX(45deg);

}

Le code ci-dessus définit une rotation sur l'axe X pour l'élément body, tout en déplaçant l'origine des rotations au bas de l'élément à l'aide de transform-origin. En pratique, le contenu du document « rentre » dans l'écran en pivotant :

Capture d'écran illustrant l'application de la transformation rotateX(45deg) à l'élément <body>, avec transform-origin: 50% 100%

Nous pouvons également manipuler la propriété perspective-origin de l'élément racine de notre document, pour aboutir à un effet de projection désaxée. Le style de <html> est modifié :

html {

perspective: 500px;

perspective-origin: 90% 50%;

}

Notre page ressemble maintenant à ceci :

Capture d'écran illustrant l'application de perspective: 500px et perspective-origin: 90% 50% à l'élément <html>

Grâce aux transformations CSS, nous pouvons manipuler facilement l'apparence visuelle de l'intégralité du contenu de notre page. Comme les règles habituelles de disposition et de dimensionnement s'appliquent, certaines transformations appliquées à l'élément body (en particulier celles qui utilisent des valeurs en pourcentage ou qui s'appuient sur la propriété transform-origin) peuvent produire des effets visuels différents, selon le contenu de la page. Souvenez-vous de notre exemple rotateX(45deg) précédent, avec la propriété transform-origin définie sur 50% 100%.

Vous pouvez voir ci-dessous les résultats avant et après l'application de la transformation.

Capture d'écran mettant en évidence la différence entre les barres de défilement avant et après l'application d'une transformation dans la projection de perspective

Vous remarquerez qu'en réalité, le contenu ne pivote pas sur l'axe représenté par le bas de la fenêtre, mais sur un axe situé à l'extérieur de la fenêtre d'affichage. Il s'agit là d'un comportement normal dans le cas des transformations CSS : l'élément <body> est disposé normalement à l'écran, puis il fait l'objet d'une rotation le long de son bord inférieur, situé en dehors de l'écran. Vous remarquerez également que la place réelle occupée par le contenu est plus grande (observez les barres de défilement sur l'image « après »), de façon à s'adapter à la taille du contenu transformé (comme nous utilisons une projection de perspective, l'effet est encore plus prononcé).

Comment faire pour gérer les contenus de taille arbitraire lors de l'application de transformations à notre élément body ? Il serait irréaliste de dimensionner de façon personnalisée l'intégralité du contenu pour faire en sorte que la taille de l'élément body ne dépasse pas une certaine valeur. En revanche, nous pouvons utiliser un modèle HTML/CSS simple qui nous permet de caler la taille de l'élément body sur celle de la fenêtre du navigateur et d'ajouter le contenu au sein d'un wrapper <div>. Le code suivant permet justement d'effectuer cette opération :

html, body {

width: 100%;

height: 100%;

min-width: 100%;

max-width: 100%;

padding: 0;

margin: 0;

overflow: hidden;

}

 

#Wrapper {

position: absolute;

width: 100%;

height: 100%;

overflow: scroll;

}

L'illustration ci-dessous montre ce qui se passe lorsque l'utilisateur fait défiler la page verticalement et que nous appliquons une transformation rotateY(45deg) directement à l'élément <body> de notre document (à gauche) ou en utilisant le modèle de wrapper (à droite) :

Capture d'écran montrant ce qui se passe lorsque l'utilisateur fait défiler la page verticalement et qu'une transformation rotateY(45deg) est appliquée à l'élément <body> dans la projection de perspective, avec et sans le modèle de wrapper CSS/HTML

Le fait d'appliquer directement la transformation fausse le résultat visuel, car la projection est désaxée (puisque nous ne regardons plus le « centre » de l'élément body). Grâce au modèle de wrapper, nous sommes certains que la propriété perspective-origin de l'élément <html> (50% 50%, par défaut) sera toujours correctement centrée par rapport à l'élément <body>, générant au final un effet visuel agréable.

En utilisant le modèle ci-dessus et en configurant les transformations CSS avec des valeurs en pourcentage chaque fois que cela est possible, nous pouvons affecter notre élément <body> de façon cohérente, quelle que soit la taille du contenu.

Des transformations aux animations

Maintenant que nous avons résolu les complexités liées à l'application des transformations CSS à l'élément <body>, passons aux animations CSS. En suivant les principes décrits ci-dessus, nous pouvons créer des animations qui font apparaître le contenu Web à l'écran (ou qui l'en font disparaître) de façon intéressante.

Examinons cette règle @keyframes simple :

@keyframes rotateInLeft {

from {

transform-origin: 0% 0%;

transform: rotateY(180deg);

}

to {

transform-origin: 0% 0%;

transform: rotateY(0deg);

}

}

Lorsqu'elle est appliquée à un élément, cette animation le fait pivoter sur son côté gauche. Lorsqu'elle est appliquée à un élément <body> qui utilise notre modèle de wrapper, l'effet visuel est encore plus intéressant. En fait, le document pivote à partir de l'extérieur de la zone visible de la fenêtre du navigateur, pour ensuite apparaître en pleine page :

Séquence de trois captures d'écrans illustrant l'application de l'animation « rotateInLeft »

Nous pouvons de la même manière composer des animations qui font disparaître de façon fluide notre contenu Web de la vue. Par exemple, si nous voulons que notre page disparaisse vers le fond tout en pivotant, nous pouvons utiliser le code suivant :

@keyframes whirlOut {

to {

transform: scale(0)rotateZ(1260deg);

}

}

Voici le résultat obtenu :

Séquence de trois captures d'écrans illustrant l'application de l'animation « whirlOut »

Comme nous pouvons exploiter toute la puissance des animations CSS pour appliquer des effets à l'intégralité du contenu Web, nous disposons d'une grande flexibilité quant à la génération des effets appliqués aux pages (cela ne se limite d'ailleurs pas aux transformations CSS). Mais une fois que nous avons composé les effets à appliquer à notre contenu, comment faire pour les déclencher au cours du processus de navigation entre les pages ?

Ajout d'animations à l'élément <body>

Notre objectif est de déclencher des animations à des moments stratégiques de l'expérience de navigation, pour donner l'impression que le contenu apparaît à l'écran de façon progressive lorsqu'une page est chargée et disparaît progressivement lorsque l'utilisateur clique sur un lien.

Logiquement, le premier emplacement qui vient à l'esprit pour ajouter une animation à l'élément body est l'événement JavaScript onload. Néanmoins, lorsque l'événement onload survient, il est déjà trop tard pour ajouter une animation. En effet, cet événement se déclenche en fait une fois que l'intégralité du contenu de la page est chargée (y compris les images et les autres ressources consommatrices de bande passante). Si nous ajoutons une animation à un événement onload sur une page fortement consommatrice de bande passante, notre contenu est d'abord affiché normalement. L'animation ne se déclenche que dans un second temps et le contenu réapparaît alors à l'écran. Cela ne correspond pas vraiment à ce que nous souhaitons faire.

Nous pourrions aussi utiliser l'événement DOMContentLoaded, qui se déclenche lorsque le navigateur a terminé l'analyse de la structure DOM du contenu (éventuellement avant la fin du chargement des ressources). La DOMContentLoadeddémonstration IE Test Drive montre la différence entre ces deux événements. Cependant, dans le cas de contenus Web complexes, un navigateur moderne peut décider d'effectuer un rendu « progressif », en affichant la page avant même que l'intégralité de l'arborescence du DOM n'ait été chargée. Dans ce cas, le résultat visuel est similaire à celui du scénario onload.

En réalité, le haut de l'élément <body> constitue l'endroit idéal pour définir une animation faisant apparaître de façon progressive le contenu de notre page. Ainsi, l'animation démarre dès que le contenu est rendu (et la position de départ du contenu correspond à celle de l'image clé from de l'animation sélectionnée). Cette approche a en plus le mérite de masquer les éventuels rendus progressifs, changement de disposition et autres chargements de ressources pouvant survenir dans le cas de contenus complexes.

Il est également intéressant de définir des animations faisant disparaître progressivement le contenu. À première vue, on pourrait penser qu'il suffit d'associer un gestionnaire onclick à tous les éléments intéressants de notre contenu (toutes les bases <a>, par exemple) et de définir les propriétés d'animation pertinentes (animation-name, animation-duration, etc.) dans la fonction de rappel. Cependant, si nous n'appliquons pas un retard à la navigation, nous ne verrons pas la transition fluide attendue.

Voilà l'occasion idéale pour utiliser les événements d'animation décrits dans la spécification des animations CSS. Nous pouvons en particulier utiliser l'événement animationend une fois que l'animation est terminée, puis déclencher une navigation (en définissant window.location.href, par exemple). Ainsi, notre événement onclick déclenche l'animation de « disparition » et inscrit un gestionnaire pour animationend dans l'élément <body>, qui permettra le déclenchement de l'événement de navigation.

Une démonstration est disponible

Nous avons mis au point une démonstration et un didacticiel (en anglais) sur l'ajout d'effets aux pages à l'aide de transformations et d'animations CSS. Ils fournissent des exemples et des informations plus détaillées que ce billet de blog. Le didacticiel met en œuvre des animations pleine page au cours de la navigation, qui fonctionnent dans  Internet Explorer 10 sous Windows 8 et dans les versions récentes de Chrome et Firefox.

Pour profiter des animations de changement de page, parcourez les pages du didacticiel à l'aide des liens « Continue to ... » figurant en bas à droite de chaque page.

La dernière partie du didacticiel propose des recommandations supplémentaires et un exemple de code permettant d'incorporer ces animations à votre propre contenu Web.

Conclusion

Les transformations et les animations CSS constituent deux ensembles de fonctionnalités extrêmement puissants, permettant de créer des expériences Web plus riches et plus immersives. Ce billet de blog vous a expliqué comment utiliser les transformations et les animations CSS pour rendre l'ensemble de vos contenus Web plus vivants. Avec peu d'efforts, vous pouvez créer des pages Web (y compris des pages statiques) offrant une expérience de navigation fluide et presque similaire à celle des applications.

—Charilaos “Harris” Papadopoulos, Chef de projet stagiaire, Graphismes d'Internet Explorer

  • Loading...