Popping Commentaires avec le positionnement de l'ancrage CSS et les animations pilotées par la vue

Les résultats de l'enquête sur le statut CSS 2024 ont été publiés et sont toujours aussi fascinants. Bien que chaque section mérite une analyse approfondie, nous nous concentrons généralement sur les parties des fonctionnalités CSS les plus couramment utilisées. Si vous êtes intéressé à écrire des articles sur le développement Web (peut-être pouvez-vous commencer à écrire avec nous?), Vous voudrez particulièrement consulter la section Liste de lecture de la fonctionnalité. Il contient les fonctionnalités que les répondants à l'étude souhaitent lire après avoir rempli l'enquête, composé généralement des dernières fonctionnalités avec moins de sensibilisation à la communauté.

Une fonctionnalité qui m'excite est mon premier choix pour 2024: CSS Ancre Positioning , classé quatrième de l'enquête. Vous pouvez trouver l'animation Scroll Driver ci-dessous, une autre fonctionnalité excellente qui a reçu un large support de navigateur cette année. Les deux sont élégants et offrent une bonne expérience de développeur, mais les combiner ouvre de nouvelles possibilités que la plupart des gens ont vu l'année dernière tomber dans le domaine du JavaScript.

Je veux présenter l'une de ces possibilités tout en comprenant plus ces deux caractéristiques. Plus précisément, nous créerons un article de blog où les notes de bas de page apparaissent comme des commentaires à côté de chaque paragraphe de texte.

Pour cette démonstration, nos exigences sont les suivantes:

La note de bas de page apparaît lorsqu'elle pénètre dans l'écran.
Fixez-les au texte correspondant.
Les notes de bas de page sont situées des deux côtés de l'écran, nous avons donc besoin d'une solution de sauvegarde mobile.

bases

Tout d'abord, nous utiliserons les exemples de disposition des articles de blog communs suivants: titre, image de couverture et corps:

La seule chose à noter est que nous avons parfois un paragraphe avec des notes de bas de page:

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

Emplacement Note de bas de page

Dans cette démonstration, la note de bas de page est située dans le corps de l'article, immédiatement après le texte que nous voulons commenter. Cependant, nous voulons qu'ils soient attachés à côté du texte en tant que bulles flottantes. Dans le passé, nous pourrions devoir utiliser une combinaison de positionnement absolu et relatif et trouver l'attribut de marge correct pour chaque note de bas de page.

Cependant, nous pouvons maintenant le faire en utilisant le positionnement de l'ancrage, une fonctionnalité qui nous permet de positionner des éléments absolument positionnés par rapport à d'autres éléments - pas simplement par rapport au contexte du conteneur dans lequel ils se trouvent. Nous parlerons de "ancre" et "cible" pendant un certain temps, donc certains termes sont nécessaires au début:

• Point d'ancrage: Il s'agit de l'élément utilisé comme référence pour positionner d'autres éléments, d'où le nom d'ancrage du nom.
• Target: Il s'agit d'un élément de positionnement absolu positionné par rapport à un ou plusieurs points d'ancrage. L'objectif est le nom que nous utilisons à partir de maintenant, mais dans d'autres ressources, vous le trouvez souvent "des éléments absolument positionnés".

Je n'entrerai pas dans tous les détails en détail, mais si vous voulez en savoir plus, je recommande fortement notre guide de positionnement d'ancrage avec des informations et des exemples complets.

ancres et cibles

Il est facile de savoir que chaque .footnote est un élément cible. Cependant, le choix de nos points d'ancrage nécessite plus de nuances. S'il semble que chaque élément .note soit un élément d'ancrage, il est préférable de choisir l'ensemble de .post comme ancre. Si nous définissons la position de .footnote sur une position absolue, je l'expliquerai:

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

Vous remarquerez que les éléments .footnote de l'article ont été supprimés du flux de document normal et qu'ils planent visuellement sur leurs éléments .note. C'est une bonne nouvelle! Puisqu'ils sont déjà alignés sur l'axe vertical, nous avons juste besoin d'utiliser l'article comme ancre et de les déplacer sur le côté sur l'axe horizontal.

À ce stade, nous devons trouver les attributs de marge corrects pour les placer des deux côtés. Bien que cela soit possible, c'est un choix douloureux car:

1. Vous devez compter sur un numéro magique.
2. Cela dépend de la fenêtre.
3. Cela dépend du contenu de la note de bas de page car il change sa largeur.

L'élément

n'est pas une ancre par défaut, donc pour enregistrer un article en tant qu'ancre, nous devons utiliser la propriété anchor-name et lui fournir un identifiant horizontal court (un nom personnalisé commençant par deux lignes horizontales courtes) comme nom.

<code>.footnote {
  position: absolute;
}</code>

Dans ce cas, notre élément cible sera .footnote. Pour utiliser l'élément cible, nous pouvons préserver le positionnement absolu et sélectionner l'élément d'ancrage à l'aide de la propriété position-anchor, qui prend l'identifiant de ligne horizontale courte de l'ancrage. Cela fera de .post le point d'ancrage par défaut pour la cible à l'étape suivante.

<code>.post {
  anchor-name: --post;
}</code>

Déplacer la cible

Au lieu de sélectionner n'importe quelle valeur de marge pour l'attribut .footnote ou left de right, nous pouvons utiliser la fonction anchor(). Il renvoie une valeur <length></length> représentant la position d'un côté du point d'ancrage, nous permettant de toujours définir correctement la propriété de marge de la cible. Nous pouvons donc connecter le côté gauche de la cible au côté droit du point d'ancrage et vice versa:

<code>.footnote {
  position: absolute;
  position-anchor: --post;
}</code>

Cependant, vous remarquerez qu'il est coincé d'un côté de l'article, sans espace au milieu. Heureusement, l'attribut margin fonctionne de la même manière que vous souhaitez cibler l'élément cible et laisse un peu d'espace entre la cible de la note de bas de page et l'ancre post. Nous pouvons également ajouter plus de styles pour rendre le look plus beau:

<code>.footnote {
  position: absolute;
  position-anchor: --post;

  /* 将它们放在右侧 */
  left: anchor(right);

  /* 或将它们放在左侧 */
  right: anchor(left);

  /* 每次只使用其中一个！ */
}</code>

Enfin, tous les éléments .footnote sont du même côté de l'article, et si nous voulons les organiser de chaque côté, nous pouvons utiliser le sélecteur nth-of-type() pour sélectionner des annotations étranges et même et les définir sur les côtés opposés.

<code>.footnote {
  /* ... */

  background-color: #fff;
  border-radius: 20px;
  margin: 0px 20px;
  padding: 20px;
}</code>

Nous utilisons nth-of-type() au lieu de nth-child parce que nous voulons simplement itérer les éléments .note au lieu de tous les éléments de frère.

N'oubliez pas de supprimer la dernière instruction de marge de .footnote puis Voice ! Nos notes de bas de page sont situées de chaque côté. Vous remarquerez que j'ai également ajouté un petit triangle pour chaque note de bas de page, mais cela dépasse le cadre de cet article:

Animation basée sur la vue

Commençons par créer des animations contextuelles. J'ai trouvé que c'était la partie la plus simple parce que la vue et l'animation à entraînement de défilement sont aussi intuitives que possible. Nous enregistrerons d'abord l'animation en utilisant le commun @keyframes. Ce que nous voulons, c'est de faire commencer notre note de bas de page à partir de l'invisible et de devenir lentement plus gros et visible:

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

C'est notre animation, maintenant nous avons juste besoin de l'ajouter à chaque .footnote:

<code>.footnote {
  position: absolute;
}</code>

Cela ne fait rien lui-même. Nous définissons généralement un animation-duration pour qu'il commence. Cependant, l'animation axée sur la vue ne passera pas à travers le temps défini, mais la progression de l'animation dépendra de la position de l'élément sur l'écran. Pour ce faire, nous définissons animation-timeline à view().

<code>.post {
  anchor-name: --post;
}</code>

Cela provoque la fin de l'animation lorsque l'élément quitte l'écran. Nous voulons que cela se termine dans une position plus lisible. La touche finale consiste à définir animation-range pour cover 0% cover 40%. Cela signifie: "Je veux que l'élément commence l'animation lorsqu'il est de 0% dans la vue et se termine quand il est de 40% dans la vue."

<code>.footnote {
  position: absolute;
  position-anchor: --post;
}</code>

L'outil incroyable de Bramus se concentre davantage sur le défilement et les animations axées sur la vue, ce qui montre mieux comment les propriétés animation-range fonctionnent.

Que dois-je faire lorsque j'exécute le terminal mobile?

Vous avez peut-être remarqué que cette méthode de note de bas de page ne fonctionne pas sur des écrans plus petits car il n'y a pas d'espace des deux côtés de l'article. Le correctif est très simple. Nous voulons que les notes de bas de page apparaissent comme des notes de bas de page normales sur de petits écrans et comme des commentaires sur de grands écrans, ce que nous pouvons faire en affichant nos commentaires uniquement lorsque l'écran est plus grand qu'un certain seuil (environ 1000 pixels). Sinon, les commentaires apparaîtront dans le corps de l'article comme tous les autres commentaires que vous trouvez sur le Web.

<code>.footnote {
  position: absolute;
  position-anchor: --post;

  /* 将它们放在右侧 */
  left: anchor(right);

  /* 或将它们放在左侧 */
  right: anchor(left);

  /* 每次只使用其中一个！ */
}</code>

Maintenant, nos commentaires ne seront affichés des deux côtés que s'il y a suffisamment d'espace:

Résumé

Si vous aimez également écrire du contenu qui vous passionne, vous vous retrouverez souvent à entrer dans des tangentes aléatoires ou que vous souhaitez ajouter des commentaires à chaque paragraphe pour fournir un contexte supplémentaire. Au moins, c'est mon cas, donc pouvoir afficher dynamiquement les commentaires est un bon ajout. Surtout quand nous pouvons le faire avec seulement CSS - c'est quelque chose que nous ne pourrions pas faire il y a un an!

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!