Tête collante dirigée par défilement

Les animations axées sur le défilement sont super! Ils sont un outil puissant qui permet aux développeurs de lier le mouvement et la transformation des éléments directement en position de défilement de l'utilisateur. Cette technique ouvre de nouvelles façons de créer des expériences interactives, des images à apparaître, du texte pour glisser sur la scène et des arrière-plans pour se déplacer subtilement. Utilisé de manière réfléchie, les animations axées sur le défilement (SDA) peuvent rendre votre site Web plus dynamique, engageant et réactif.

Il y a quelques semaines, je jouais avec des animations pilotées par défilement, je cherchais juste toutes sortes de choses aléatoires que vous pourriez faire avec. C'est à ce moment-là que j'ai eu l'idée d'animer le texte de l'en-tête principal (H1) et, à l'aide de SDA, modifiez la tête elle-même en fonction de la position de défilement de l'utilisateur sur la page. Dans cet article, nous allons briser cette idée et la reconstruire étape par étape. C'est la direction générale que nous nous dirigerons, qui a l'air mieux en plein écran et visualisée dans un navigateur de chrome:

Il est important de noter que l'effet de cet exemple ne fonctionne que dans les navigateurs qui prennent en charge les animations pilotées par défilement. Là où SDA n'est pas pris en charge, il y a un report approprié aux titres statiques. Du point de vue de l'accessibilité, si le navigateur a réduit le mouvement activé ou si la page est accessible avec une technologie d'assistance, l'effet est désactivé et l'utilisateur obtient tout le contenu d'une manière entièrement sémantique et accessible.

Juste une note rapide: cette approche s'appuie sur quelques «numéros magiques» pour les images clés, dont nous parlerons plus tard. Bien qu'ils soient étonnamment réactifs, cette méthode est vraiment la mieux adaptée au contenu statique, et il n'est pas idéal pour les sites Web très dynamiques.

Regardez de plus près l'animation

Avant de plonger dans des animations pilotées par défilement, prenons une minute pour regarder l'animation de texte elle-même et comment cela fonctionne réellement. Ceci est basé sur une idée que j'avais il y a quelques années lorsque je voulais créer un effet de machine à écrire. À l'époque, la plupart des méthodes que j'ai trouvées impliquaient d'animation de la largeur de l'élément, nécessitaient en utilisant une police monospace ou un fond de couleur unie. Rien de tout cela a vraiment fonctionné pour moi. J'ai donc cherché un moyen d'animer le contenu lui-même, et la solution était, comme c'est souvent le cas, dans les pseudo-éléments.

Les pseudo-éléments ont une propriété de contenu et vous pouvez (en quelque sorte) animer ce texte. Ce n'est pas exactement une animation, mais vous pouvez modifier le contenu dynamiquement. La partie cool est que la seule chose qui change est le texte lui-même, aucune autre astuce requise.

Commencez par une base solide

Maintenant que vous connaissez l'astuce derrière l'animation de texte, voyons comment le combiner avec une animation axée sur le défilement et assurez-vous que nous ayons également une selle solide et accessible.

Nous allons commencer par un balisage sémantique de base. Je vais tout envelopper dans un élément principal, avec des sections individuelles à l'intérieur. Chaque section obtient son propre titre et son contenu, comme le texte et les images. Pour cet exemple, j'ai mis en place quatre sections, chacune avec un peu de texte et quelques images, tout sur les couleurs primaires.

<main>
  <section>
    <h1>Couleurs primaires</h1>
    <p>Les trois couleurs primaires (rouge, bleu et jaune) forment la base de toutes les autres couleurs sur la roue chromatique. Les mélanger dans différentes combinaisons produit un large éventail de teintes.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228405842915.jpg" class="lazy" alt="Tête collante dirigée par défilement">
  </section>
  
  <section>
    <h2>Puissance rouge</h2>
    <p>Le rouge est une couleur audacieuse et vibrante, symbolisant l'énergie, la passion et la chaleur. Il attire facilement l'attention et est souvent lié à de fortes émotions.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406079019.jpg" class="lazy" alt="Tête collante dirigée par défilement">
  </section>
  
  <section>
    <h2>Calle bleu</h2>
    <p>Le bleu est une couleur calme et fraîche, représentant la tranquillité, la stabilité et la confiance. Il évoque des images du ciel et de la mer, créant une humeur paisible.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406146761.jpg" class="lazy" alt="Tête collante dirigée par défilement">
  </section>
  
  <section>
    <h2>Joie jaune</h2>
    <p>Le jaune est une couleur vive et joyeuse, debout pour la lumière, l'optimisme et la créativité. Il est très visible et apporte un sentiment de bonheur et d'espoir.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406273727.jpg" class="lazy" alt="Tête collante dirigée par défilement">
  </section>
</main>

Quant au style, je ne fais rien de spécial à ce stade, juste les bases. J'ai changé la police et ajusté le texte et les tailles d'en-tête, configuré l'affichage pour la principale et les sections, et corrigé les tailles d'image avec un objet.

Ainsi, à ce stade, nous avons un site simple avec un contenu statique, sémantique et accessible, ce qui est génial. Maintenant, l'objectif est de s'assurer qu'il reste ainsi alors que nous commençons à ajouter notre effet.

Le deuxième premier titre

Nous allons commencer par ajouter un autre élément H1 en haut de la principale. Ce nouvel élément servira d'espace réservé à notre texte animé, à la mise à jour en fonction de la position de défilement de l'utilisateur. Et oui, je sais qu'il y a déjà un H1 dans la première section; C'est bien et nous allons y remédier dans un instant afin que un seul soit accessible à la fois.

<h1 aria-hidden="true"> Couleurs primaires</h1>

Notez que j'ai ajouté Aria-Hidden = "True" à cette rubrique, de sorte qu'il ne sera pas repris par les lecteurs d'écran. Maintenant, je peux ajouter une classe spécifiquement pour les lecteurs d'écran,. Stronly, à tous les autres titres. De cette façon, toute personne qui consulte le contenu «normalement» ne verra que l'en-tête animé, tandis que les utilisateurs de technologie d'assistance obtiendront les rubriques sémantiques statiques et statiques.

Remarque: Le style de la classe.

Gestion du support

Autant que l'accessibilité est importante, il y a une autre préoccupation que nous devons garder à l'esprit: le soutien. Les animations axées sur le défilement CSS sont fantastiques, mais elles ne sont toujours pas entièrement prises en charge partout. C'est pourquoi il est important de fournir la version statique des navigateurs qui ne prennent pas en charge SDA.

La première étape consiste à masquer la rubrique animée que nous venons d'ajouter en utilisant l'affichage: aucun. Ensuite, nous ajouterons un nouveau bloc @Supports pour vérifier le support SDA. À l'intérieur de ce bloc, où SDA est pris en charge, nous pouvons modifier l'affichage pour l'en-tête.

La classe. De cette façon, tout comme avec la technologie d'assistance, toute personne visitant la page dans un navigateur sans support SDA obtiendra toujours le contenu statique.

 .
  Affichage: aucun;
}

@Supports (Animation-TimeLine: Scroll ()) {
  .
    Affichage: bloc;
  }
  
  / * Lecteurs d'écran uniquement * /
  .sronly {
    Clip: rect (0 0 0 0); 
    Path de clip: encadré (50%);
    hauteur: 1px;
    débordement: caché;
    Position: absolue;
    Espace blanc: Nowrap; 
    Largeur: 1px;
  }
}

Être collant

La prochaine chose que nous devons faire est de gérer l'adhérence de la rubrique. Pour nous assurer que l'en-tête reste toujours à l'écran, nous allons régler sa position sur Sticky avec le haut: 0 pour qu'il colle en haut de la fenêtre.

Pendant que nous y sommes, ajoutons un style de base, y compris un fond afin que le texte ne se mélange pas avec tout ce qui se trouve derrière le cap, un peu de rembourrage pour l'espacement et l'espace blanc: maintenant pour garder la tête sur une seule ligne.

 / * à l'intérieur du bloc @Supports * /
.
  Affichage: bloc;
  Position: collante;
  en haut: 0;
  Image d'arrière-plan: gradient linéaire (0deg, transparent, noir 1EM);
  rembourrage: 0,5EM 0,25EM;
  Espace blanc: Nowrap;
}

Maintenant, tout est configuré: dans des conditions normales, nous verrons une seule tête collante en haut de la page. Et si quelqu'un utilise une technologie d'assistance ou un navigateur qui ne prend pas en charge SDA, il obtiendra toujours le contenu statique régulier.

Maintenant, nous sommes prêts à commencer à animer le texte. Presque…

Les chiffres magiques

Pour construire l'animation de texte, nous devons savoir exactement où le texte doit changer. Avec SDA, le défilement devient essentiellement notre chronologie, et nous devons déterminer les points exacts sur cette chronologie pour déclencher l'animation.

Pour faciliter cela et pour vous aider à identifier ces positions, j'ai préparé le script suivant:

 @Property - Scroll Position {
  Syntaxe: "<number> "
  hérite: faux;
  valeur initiale: 0;
}

corps :: après {
  Counter-Ressest: Sp var (- Position de défilement);
  Contenu: compteur (sp) "%";
  Position: fixe;
  en haut: 0;
  à gauche: 0;
  rembourrage: 1em;
  Color en arrière-plan: Maroon;
  Animation: étapes de la position de défilement (100);
  Animation-Timeline: Scroll ();
}

@KeyFrames ScrollPosition {
  0% {- Position de scroll: 0; }
  100% {- Position de scroll: 100; }
}</number>

Je ne veux pas entrer trop profondément dans ce code, mais l'idée est de prendre la même chronologie de défilement que nous utiliserons à côté pour animer le texte et de l'utiliser pour animer une propriété personnalisée (- - la position de scroll) de 0 à 100 en fonction de la progression de défilement et afficher cette valeur dans le contenu.

Si nous ajouterons cela au début de notre code, nous verrons un petit carré rouge dans le coin supérieur gauche de l'écran, montrant la position de défilement actuelle en pourcentage (pour correspondre aux images clés). De cette façon, vous pouvez faire défiler n'importe quelle section que vous souhaitez et marquer facilement le pourcentage où chaque cap doit commencer.

Avec cette méthode et un peu d'essais et d'erreurs, j'ai constaté que je veux que les titres changent à 30%, 60% et 90%. Alors, comment faisons-nous réellement? Commençons à animer.

Animer le texte

Tout d'abord, nous allons effacer le contenu à l'intérieur de l'élément. Dans le CSS, j'ajouterai un pseudo-élément à l'en-tête, que nous utiliserons pour animer le texte. Nous allons lui donner du contenu vide, configurer le nom d'animation et bien sûr, attribuer la Timeline Animation à Scroll ().

Et puisque j'anime la propriété de contenu, ce qui est un type discret, il ne se transforme pas en douceur entre les valeurs. Il saute de l'un à l'autre. En définissant la propriété d'animation-timing-fonction dans le pas, je m'assure que chaque changement se produit exactement à l'image clé que je définisse, de sorte que le texte change précisément où je le veux, au lieu de quelque part entre les deux.

 .
  /* style */

  &::après {
    contenu: '';
    nom d'animation: HeadingContent;
    Animation-TIMing-Function: Step-End;
    Animation-Timeline: Scroll ();
  }
}

Quant aux images clés, cette partie est assez simple (pour l'instant). Nous allons définir le premier cadre (0%) sur le premier titre et attribuer les autres titres aux pourcentages que nous avons trouvés plus tôt.

 @KeyFrames HeadingContent {
  0% {Contenu: 'Primary Colors'}
  30% {Contenu: 'Red Power'}
  60% {Contenu: 'Blue Calm'}
  90%, 100% {Contenu: 'Joy Joy'}
}

Donc, nous avons maintenant un site avec une rubrique collante qui se met à jour lorsque vous faites défiler.

Mais attendez, maintenant, il change instantanément. Où est l'animation ?! Voici où ça devient intéressant. Puisque nous n'utilisons pas de manipulation JavaScript ou de chaîne, nous devons écrire nous-mêmes les images clés. La meilleure approche consiste à commencer à partir de la rubrique cible que vous souhaitez atteindre et à construire en arrière. Donc, si vous voulez animer entre le premier et le deuxième titre, cela ressemblerait à ceci:

 @KeyFrames HeadingContent {
  0% {Contenu: 'Primary Colors'}
  
  9% {Contenu: 'Couleur primaire'}
  10% {Contenu: 'Primary Colo'}
  11% {Contenu: 'Primary Col'}
  12% {Contenu: 'Primary Co'}
  13% {Contenu: 'Primary C'}
  14% {Contenu: 'primaire'}
  15% {Contenu: 'primaire'}
  16% {Contenu: 'Primar'}
  17% {Contenu: 'prima'}
  18% {Contenu: 'prim'}
  19% {Contenu: 'pri'}
  20% {Contenu: 'Pr'}
  21% {Contenu: 'P'}
  
  22% {Contenu: 'R'}
  23% {Contenu: 'Re'}
  24% {Contenu: 'Red'}
  25% {Contenu: 'Red'}
  26% {Contenu: 'Red P'}
  27% {Contenu: 'Red Po'}
  28% {Contenu: 'Red Pow'}
  29% {Contenu: 'Red Powe'}
  
  30% {Contenu: 'Red Power'}
  60% {Contenu: 'Blue Calm'}
  90%, 100% {Contenu: 'Joy Joy'}
}

Je suis simplement retourné de 1% à chaque fois, en supprimant ou en ajoutant une lettre au besoin. Notez que dans d'autres cas, vous voudrez peut-être utiliser une taille de pas différente, et pas toujours 1%. Par exemple, sur des titres plus longs avec plus de mots, vous voudrez probablement des étapes plus petites.

Si nous répétons ce processus pour tous les autres titres, nous nous retrouverons avec une rubrique entièrement animée.

Préférences des utilisateurs

Nous avons déjà parlé de l'accessibilité et de nous assurer que le contenu fonctionne bien avec la technologie d'assistance, mais il y a encore une chose que vous devriez garder à l'esprit: préfère le mouvement réduit. Même si ce n'est pas une exigence stricte WCAG pour ce type d'animation, cela peut faire une grande différence pour les personnes ayant des sensibilités vestibulaires, c'est donc une bonne idée d'offrir un moyen de montrer le contenu sans animations.

Si vous souhaitez fournir une alternative non animée, tout ce que vous avez à faire est d'envelopper votre bloc @Supports avec une requête en mouvement préfabriqué:

 Écran @Media et (préfère le mouvement réduit: sans préférence) {
  @Supports (Animation-TimeLine: Scroll ()) {
    /* style */
  }
}

Niveler vers le haut

Parlons des variations. Dans l'exemple précédent, nous avons animé l'ensemble du texte de cap, mais nous n'avons pas à le faire. Vous pouvez animer uniquement la partie que vous souhaitez, et utiliser des animations supplémentaires pour améliorer l'effet et rendre les choses plus intéressantes. Par exemple, ici, j'ai gardé le texte «couleur primaire» fixe et ajouté une portée après elle qui gère le texte animé.

<h1 aria-hidden="true">
  Couleur primaire<span></span>
</h1>

Et puisque j'ai maintenant une portée séparée, je peux également animer sa couleur pour correspondre à chaque valeur.

Dans l'exemple suivant, j'ai gardé l'animation de texte sur la travée, mais au lieu de changer la couleur du texte, j'ai ajouté une autre animation pilotée par défilement sur la tête elle-même pour changer sa couleur d'arrière-plan. De cette façon, vous pouvez ajouter autant d'animations que vous le souhaitez et changer ce que vous voulez.

Votre tour!

Les animations pilotées par le défilement CSS sont plus qu'un simple truc cool; Ils changent la donne qui ouvrent la porte à un tout nouveau monde de conception Web. Avec juste un peu de créativité, vous pouvez transformer même les pages les plus ordinaires en quelque chose d'interactif, mémorable et vraiment engageant. Les possibilités sont vraiment infinies, des effets subtils qui améliorent l'expérience utilisateur, aux transitions animées sauvages qui font ressortir votre site.

Alors, que construiriez-vous avec des animations pilotées par défilement? Que crémeriez-vous avec cette nouvelle superpuissance? Essayez-le, expérimentez, et si vous trouvez quelque chose de cool, ayez des idées, des expériences sauvages ou même des échecs étranges, j'aimerais en entendre parler. Je suis toujours ravi de voir ce que les autres proposent, alors n'hésitez pas à partager votre travail, vos questions ou vos commentaires ci-dessous.

Un merci spécial à Cristian Díaz d'avoir examiné les exemples, de s'assurer que tout est accessible et de contribuer de précieux conseils et améliorations.

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!