Comment créer des animations pleine page à l'aide de CSS

Les plats clés

• Les animations pleine page peuvent être créées à l'aide des animations CSS 3D et 2D Transforts et CSS, offrant une alternative plus performante et flexible aux animations traditionnelles basées sur des scripts pour le contenu Web. L'élément HTML peut être transformé à l'aide d'animations CSS pour réaliser ces effets.
• Pour garantir des résultats cohérents lors de l'application de CSS se transforme en élément, quelle que soit la taille de son contenu, la taille de l'élément corporel peut être fixée à celle de la fenêtre du navigateur et le contenu peut être ajouté à l'intérieur d'un emballage. Cette approche peut également masquer tout rendu progressif, re-déplacement ou chargement de ressources qui peut se produire avec un contenu complexe.
• Les animations peuvent être configurées à des moments stratégiques au cours de l'expérience de navigation pour donner l'apparition de la transition de contenu en vue lorsqu'une page se charge et hors vue lorsqu'un utilisateur clique sur un lien. L'endroit optimal pour configurer une animation qui transitions le contenu de la page en vue est en ligne en haut de l'élément. L'événement AnimationEnd peut être utilisé pour détecter quand une animation est terminée, puis déclencher un événement de navigation.

Les navigateurs modernes comme Internet Explorer 10 prennent en charge les transformations CSS 3D et 2D et les animations CSS. En appuyant sur la puissance de votre GPU et en exécutant de manière asynchrone à partir de JavaScript ordinaire, ces technologies fournissent une alternative plus performante et flexible aux animations traditionnelles basées sur des scripts pour le contenu Web.

J'ai parlé de la façon de construire avec les transformations CSS 3D ainsi que des animations et des transitions CSS dans les articles précédents. Dans cet article, je voudrais introduire un cas d'utilisation plus «non conventionnel» pour ces technologies en décrivant le concept d'animations en pleine page qui peuvent être utilisées pendant le processus de navigation pour ajouter de la fluidité et de la continuité à la navigation. Notre objectif est d'obtenir une expérience de navigation transparente dans laquelle le contenu apparaît en douceur lorsque l'utilisateur visite une page et se transforme lorsqu'il clique sur un lien ou effectue une action pertinente.

Ces effets peuvent être accomplis en transformant l'élément HTML

à l'aide d'animations CSS. Cependant, ce cas d'utilisation présente certaines considérations qui, selon nous, étaient dignes de discussion, telles que l'effet de la mise en page et du dimensionnement sur la transformation de , ainsi que comment les navigations de page de temps correctement afin qu'elles soient correctement avec nos animations.

Les échantillons de code dans ce post utilisent le balisage CSS non préfixé tel que pris en charge par l'aperçu de la version IE10; D'autres navigateurs peuvent nécessiter des préfixes de fournisseurs pour les animations CSS et CSS transforme les propriétés utilisées.

Transformer le contenu entier d'une page

Les transformations CSS sont définies sur les propriétés stylistiques d'un élément HTML DOM. Par exemple, le balisage pour faire tourner un élément de 45 degrés le long de son axe Z ressemblerait à ceci:

#element {
    transform: rotateZ(45deg);
}

La connexion d'une transformation à l'élément

de votre document HTML fonctionne exactement de la même manière. Donc, effectuant afin d'ajouter de manière déclarative le même effet à de votre document, vous pouvez faire quelque chose comme ceci:

body {
    transform: rotateZ(45deg);
}

Regardons une photo avant et après une page lors de l'application d'une transformation à l'élément corporel:

En appliquant une transformée de Rotatez (45Deg) à l'élément corporel d'un document.

Pour les transformations en trois dimensions, la spécification des transformations CSS définit la propriété en perspective qui peut être spécifiée sur le parent de l'élément que nous transformons. Lors de la transformation de l'élément

de votre contenu, il doit être appliqué à l'élément qui réside au-dessus de lui dans la hiérarchie DOM. Cela est simple:

html {
    perspective: 500px;
}

La combinaison de ceci avec une transformée de rotation (45deg) sur l'élément

donne le résultat suivant:

Appliquer une transformée de rotation (45DEG) en avec une perspective: 500px définie sur .

Nous pouvons manipuler la propriété d'origine transformateur sur l'élément corporel pour des résultats intéressants. Regardons quelques exemples:

body {
    transform-origin: 50% 100%;
    transform: rotateX(45deg);
}

Le balisage ci-dessus définit une rotation le long de x pour l'élément corporel tout en déplaçant l'origine des rotations vers le bas de l'élément à l'aide d'origine transformateur. En effet, cela fait pivoter le contenu du document «dans» l'écran comme celui-ci:

Nous pouvons également manipuler la propriété d'origine perspective sur l'élément racine de notre document pour obtenir un effet de projection hors axe. Changer le style pour en:

html {
    perspective: 500px;
    perspective-origin: 90% 50%;
}

Notre page ressemble maintenant à ceci:

En utilisant les transformations CSS, nous pouvons facilement manipuler l'apparence visuelle de l'intégralité du contenu de notre page. Étant donné que les règles de mise en page et de dimensionnement habituelles s'appliquent toujours, certaines transformations sur l'élément corporel (en particulier celles qui utilisent des valeurs de pourcentage ou reposent sur la propriété d'origine transformation) peuvent entraîner des effets visuels différents en fonction du contenu de notre page. Rappelez-vous notre exemple précédent Rotatex (45Deg) avec des originaux transformés à 50% 100%.

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

Remarquez comment le contenu ne pivote pas réellement en bas de la fenêtre, mais plutôt à un moment donné à l'extérieur de la fenêtre. Ce comportement est attendu pour les transformations CSS: le

est disposé normalement, puis il est tourné le long de son bord inférieur qui est quelque part hors écran. Vous remarquerez également que l'impression actuelle du contenu s'est élargie (jetez un œil aux barres de défilement de l'image «après») afin de s'adapter au contenu transformé (le fait que nous utilisons la projection en perspective rend cet effet encore plus prononcé).

Alors, comment gérons-nous le contenu de taille arbitraire lors de l'application de transformations à notre élément corporel? Adapter sur mesure tout le contenu afin de garantir que la taille du corps n'étend pas plus qu'un certain montant peut être irréaliste. Au lieu de cela, nous pouvons utiliser un modèle HTML / CSS simple qui nous permet de fixer la taille de l'élément corporel à celui de la fenêtre du navigateur et d'ajouter le contenu à l'intérieur d'un wrapper

. Le balisage suivant réalise exactement cela:

#element {
    transform: rotateZ(45deg);
}

L'illustration ci-dessous montre ce qui se passe lorsqu'une page est défilée verticalement et que nous appliquons une transformée de rotationy (45deg) à l'élément

de notre document directement (à gauche) et à l'aide du motif de wrapper (à droite):

L'application directe de la transformation se traduit par un résultat visuel asymétrique en raison de la projection hors axe (car nous ne regardons plus le «centre» de l'élément corporel). L'utilisation du motif de wrapper garantit que la propriété d'origine perspective de l'élément (50% 50% par défaut) sera toujours correctement centrée par rapport à l'élément

, nous donnant un effet visuel agréable.

En utilisant le modèle ci-dessus et en configurant les transformations CSS avec des valeurs de pourcentage chaque fois que possible, nous pouvons affecter notre élément

de manière cohérente, quelle que soit la taille de son contenu.

des transformations en animations

Ayant trié les subtilités de l'application des transformations CSS en élément

, les animations CSS sont la prochaine étape. En suivant les principes décrits ci-dessus, nous pouvons créer des animations qui mettent notre contenu Web en vue (ou la supprimer de la vue) de manière intéressante.

Considérez cette règle de base @keyframes:

body {
    transform: rotateZ(45deg);
}

Lorsqu'il est appliqué à un élément, cette animation le fera tourner sur son côté gauche. Lorsqu'il est appliqué à un élément

qui utilise notre motif de wrapper, le résultat visuel est plus intéressant. Le document tournera en fait de l'extérieur de la zone visible de la fenêtre du navigateur et en vue complète:

De même, nous pouvons composer des animations qui suppriment fluide notre contenu Web de la vue. Par exemple, si nous voulions que notre page disparaisse au loin en tournant, nous pourrions utiliser quelque chose comme ceci:

#element {
    transform: rotateZ(45deg);
}

avec le résultat visuel étant:

Puisque nous pouvons utiliser la pleine puissance des animations CSS pour affecter l'intégralité de notre contenu Web, nous avons beaucoup de flexibilité en termes de génération de ces effets de page (et nous ne nous limitons certainement pas à utiliser les transformations CSS). Mais une fois que nous avons composé les effets que nous voulons appliquer à notre contenu, comment les faire déclencher pendant le processus de navigation de la page?

Attacher des animations à

Notre objectif est d'utiliser des animations de déclenchement à des moments stratégiques pendant l'expérience du navigateur afin de donner l'apparition de la transition de contenu en vue lorsqu'une page se charge et hors de vue lorsque l'utilisateur clique sur un lien.

Le premier endroit intuitif pour ajouter une animation à l'élément corporel serait l'événement JavaScript Onload. Il s'avère cependant que l'ajout d'une animation lorsque les incendies onload sont en fait trop tard. Cet événement déclenche en fait lorsque l'intégralité du contenu de notre page a terminé le chargement (y compris toutes les images ou autres ressources à forte intensité de bande passante). La connexion d'une animation à Onload sur une page à forte intensité de bande entraînerait une affichage de notre contenu «normalement», suivi de la déclenchement et de la réévolution du contenu. Pas exactement l'effet que nous visions.

Alternativement, nous pourrions utiliser l'événement téléchargé DomContent qui se déclenche lorsque le navigateur a terminé l'analyse de la structure DOM de notre contenu (mais potentiellement avant que les ressources aient terminé le chargement). La démonstration de DomContent Télélée IE Drive IE illustre la différence entre ces deux événements. Cependant, dans les cas de contenu Web complexe, un navigateur moderne peut choisir d'effectuer un rendu «progressif», affichant la page avant que l'intégralité de l'arbre Dom a été chargé. Dans ces situations, le résultat visuel serait similaire au scénario de charge.

L'endroit optimal pour configurer une animation qui transitions notre contenu de page en vue est en ligne en haut de l'élément

. Cela garantit que l'animation commencera bien à mesure que le contenu est rendu (et que la position de départ du contenu sera celle de l'image clé de notre animation sélectionnée). Un effet secondaire agréable de cette approche est que l'animation peut en fait masquer tout rendu progressif, re-relance ou chargement de ressources qui peut se produire avec un contenu complexe.

La configuration des animations qui transitionnent notre contenu hors de vue sont également intéressantes. On pourrait supposer que nous pourrions attacher un gestionnaire ONClick à tous les éléments d'intérêt pour notre contenu (par exemple toutes les balises) et simplement définir les propriétés d'animation pertinentes (nom d'animation, durée d'animation, etc.) dans la fonction de rappel . Cependant, si nous ne retardons pas réellement la navigation de la procédure, nous ne verrons pas notre transition fluide attendue.

C'est une bonne occasion d'utiliser les événements d'animation décrits dans la spécification des animations CSS. En particulier, nous pouvons utiliser l'événement AnimationEnd pour détecter la fin de l'animation, puis déclencher une navigation (en définissant Window.Location.href, par exemple). Ainsi, notre onclick déclenchera l'animation «Supprimer-From-View» et enregistrera un gestionnaire pour AnimationEnd sur

qui garantira que l'événement de navigation se produit.

Demo en direct disponible

Nous avons créé une démonstration et un didacticiel sur la mise en vie avec des pages avec des transformations et des animations CSS qui fournissent une profondeur et des exemples au-delà de ce que nous avons pu montrer ici. Le tutoriel lui-même utilise des animations pleine page lors de la navigation de page qui fonctionnent dans Internet Explorer 10 sur Windows 8 ainsi que des versions récentes de Chrome et Firefox.

pour simplement profiter des animations de page à page, parcourez les pages du tutoriel en utilisant les liens «Continuer à…» dans le coin inférieur droit de chaque page.

À la fin du tutoriel, nous fournissons des conseils supplémentaires et un exemple de code sur la façon d'incorporer ces animations avec votre propre contenu Web.

l'enveloppement

Les transformations CSS et les animations CSS sont deux ensembles de fonctionnalités puissants qui permettent des expériences Web plus riches et plus immersives. Avec une petite quantité d'efforts, vous pouvez créer des pages Web (même statiques) qui offrent une expérience de navigation fluide et presque applicable.

Si vous avez aimé lire ce post, vous aimerez l'apprentissage; L'endroit pour acquérir de nouvelles compétences et techniques de la maîtrise. Les membres ont un accès instantané à tous les livres électroniques de SitePoint et aux cours en ligne interactifs, comme le CSS pratique.

Les questions fréquemment posées sur les animations CSS pleine page

Quelles sont les principales différences entre les animations CSS et les animations JavaScript?

Les animations CSS et les animations JavaScript servent le même objectif d'animation des éléments Web, mais ils ont des différences clés. Les animations CSS sont plus simples et plus faciles à mettre en œuvre, en particulier pour les animations simples. Ils sont également plus adaptés aux performances car ils sont gérés par le moteur de rendu du navigateur. Cependant, les animations CSS ont un contrôle et une flexibilité limités par rapport aux animations JavaScript. Les animations JavaScript, en revanche, offrent plus de contrôle et de flexibilité, permettant des animations complexes. Ils peuvent être pauvres, inversés ou manipulés en temps réel, et peuvent également répondre aux interactions des utilisateurs.

Comment puis-je rendre mes animations CSS réactives?

Rendre les animations CSS réactifs implique l'utilisation relative relative de relative? Des unités comme les pourcentages ou les unités de la fenêtre au lieu d'unités absolues comme les pixels. Cela garantit que les animations évoluent correctement quelle que soit la taille de l'écran. Vous pouvez également utiliser les requêtes multimédias pour ajuster les animations en fonction de tailles d'écran ou de types d'appareils spécifiques.

Puis-je utiliser des animations CSS avec SVG?

Oui, les animations CSS peuvent être utilisées avec SVG (Graphics vectoriels évolutifs). SVG possède son propre ensemble de propriétés CSS qui peuvent être animées, telles que le remplissage, la course et la transformation. Cela permet des animations plus complexes et intéressantes par rapport à l'animation d'éléments HTML réguliers.

Pourquoi mes animations CSS ne fonctionnent-elles pas dans certains navigateurs?

Tous les navigateurs ne prennent pas en charge toutes les propriétés d'animation CSS. Par exemple, Internet Explorer ne prend pas en charge la propriété d'animation-timing-fonction. Pour assurer la compatibilité des navigateurs croisés, vous pouvez utiliser des préfixes de fournisseurs comme -webkit-, -moz-, -o- et -ms- avant les propriétés d'animation. Vous pouvez également utiliser des outils comme AutopRefixer pour ajouter automatiquement ces préfixes.

Comment puis-je optimiser les performances de mes animations CSS?

Pour optimiser les performances des animations CSS, vous pouvez limiter le nombre de Propriétés animées, en particulier celles qui déclenchent des changements de mise en page comme la largeur, la hauteur et la marge. Au lieu de cela, utilisez des propriétés qui ne déclenchent que les changements composites comme la transformation et l'opacité. Vous pouvez également utiliser la propriété de changement de volonté pour informer le navigateur des propriétés susceptibles d'être animées.

Puis-je animer la propriété d'affichage avec CSS?

Non, la propriété d'affichage ne peut pas être animé avec CSS. En effet, il n'a pas d'états intermédiaires entre ses valeurs. Cependant, vous pouvez réaliser un effet similaire en animant les propriétés d'opacité et de visibilité.

Comment puis-je créer une animation en boucle avec CSS?

Vous pouvez créer une animation en boucle dans CSS en utilisant l'animation - Propriété de comptoir d'itération. En définissant sa valeur sur Infinite, l'animation se répétera indéfiniment.

Puis-je contrôler la vitesse de mes animations CSS?

Oui, vous pouvez contrôler la vitesse des animations CSS en utilisant la durée d'animation propriété. Cette propriété définit la durée qu'un animation prend pour terminer un cycle.

Comment puis-je suspendre une animation CSS?

Vous pouvez suspendre une animation CSS à l'aide de la propriété d'animation-play-State . En définissant sa valeur pour faire une pause, l'animation cessera de fonctionner.

Puis-je animer la propriété d'arrière-plan avec CSS?

Non, la propriété d'arrière-plan ne peut pas être animée avec CSS. Cependant, vous pouvez obtenir un effet similaire en disparaissant entre plusieurs images d'arrière-plan en utilisant la propriété Opacity.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!