CSSアンカーポジショニングとビュー駆動型アニメーションを使用したコメントをポップします

2024年のCSSステータス調査の結果はリリースされており、これまでと同じように魅力的です。各セクションは詳細な分析に値しますが、通常、最も一般的に使用されるCSS機能の部分に最も焦点を当てています。 Web開発に関する記事を書くことに興味がある場合（たぶん、私たちと一緒に書き始めることができますか？）、特に機能の読書リストのセクションをチェックしてみてください。調査回答者が調査を完了した後に読みたい機能が含まれています。通常、コミュニティの意識が低い最新の機能で構成されています。

私を興奮させる1つの機能は、2024年の最大の選択です。今年は幅広いブラウザのサポートを受けているもう1つの優れた機能は、

Scroll Driver Animationを以下に見つけることができます。どちらもエレガントで、優れた開発者エクスペリエンスを提供しますが、それらを組み合わせることで、ほとんどの人が昨年見た新しい可能性がJavaScriptの領域に分かれています。 これらの2つの機能をさらに理解しながら、これらの可能性の1つを紹介したいと思います。具体的には、テキストの各段落の横にあるコメントとして脚注がポップアップするブログ投稿を作成します。 このデモンストレーションでは、要件は次のとおりです

脚注が画面に入るとポップアップします。

対応するテキストに添付します。

脚注は画面の両側にあるため、モバイルバックアップソリューションが必要です。

基本
最初に、次の一般的なブログ投稿レイアウトの例を使用します。
• 注意すべき唯一のことは、脚注がある段落が時々あるということです。

location Footnote

このデモンストレーションでは、脚注は記事の本文にあり、テキストの直後にコメントしたいと思います。ただし、テキストの隣に浮かんでいるように添付されていることを望んでいます。過去には、絶対的なポジショニングと相対的なポジショニングの組み合わせを使用し、各脚注の正しいマージン属性を見つける必要があるかもしれません。

ただし、アンカーポジショニングを使用してこれを行うことができます。これは、他の要素と比較して絶対に配置された要素を配置できるようにする機能です。しばらくの間「アンカー」と「ターゲット」について説明するので、最初はいくつかの用語が必要です。

アンカーポイント：

これは、他の要素を位置付けるための参照として使用される要素です。したがって、アンカーポイントという名前です。

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

ターゲット：

これは、1つ以上のアンカーポイントに対して配置された絶対的な位置決め要素です。目標は、これから使用している名前ですが、他のリソースでは、「絶対に配置された要素」だけであることがよくあります。

詳細は詳細に説明しませんが、詳細を知りたい場合は、完全な情報と例を備えたアンカーポジショニングガイドを強くお勧めします。

アンカーとターゲット

それぞれ.footnoteがターゲット要素であることを簡単に知ることができます。ただし、アンカーポイントを選択するには、より多くのニュアンスが必要です。それぞれの.note要素はアンカー要素であるように思われますが、アンカーとして全体を選択することをお勧めします。 .postの位置を絶対的な位置に設定した場合、説明します：.footnote

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

記事の

要素が通常のドキュメントストリームから削除されており、.footnote要素の上に視覚的にホバリングしていることに気付くでしょう。これは良いニュースです！それらはすでに垂直軸に揃っているため、記事をアンカーとして使用して、水平軸の側面に移動するだけです。 .note

この時点で、両側に配置するための正しいマージン属性を見つける必要があります。これは実現可能ですが、それは痛みを伴う選択です。

魔法の数字に頼らなければなりません。

1. ビューポートに依存します。
2. 脚注の内容に依存します。幅が変化します。
要素はデフォルトではアンカーではないため、記事をアンカーとして登録するには、

プロパティを使用して、短い水平識別子（2つの短い水平線で始まるカスタム名）を名前として提供する必要があります。

anchor-name

この場合、ターゲット要素は

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

になります。ターゲット要素を使用するには、絶対的な位置決めを保存し、アンカーの短い水平線識別子を取得する

プロパティを使用してアンカー要素を選択できます。これにより、次のステップでターゲットのデフォルトのアンカーポイントが作成されます。 .footnote position-anchor .postターゲットを移動

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

または

属性のマージン値を選択する代わりに、

関数を使用できます。アンカーポイントの片側にある位置を表す.footnote値を返し、ターゲットのマージンプロパティを常に正しく設定できるようにします。そのため、ターゲットの左側をアンカーポイントの右側に接続できます。 left rightただし、中央にスペースがなく、記事の片側に詰まっていることがわかります。幸いなことに、anchor()属性は、ターゲット要素をターゲットにするのと同じ方法で機能し、脚注ターゲットとポストアンカーの間にスペースを残します。また、より多くのスタイルを追加して、見た目をより美しくすることもできます：<length></length>

最後に、すべての

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

要素は記事の同じ側にあり、それぞれの側に配置したい場合は、

セレクターを使用して、奇妙なアノテーションやアノテーションを選択して反対側に設定できます。 margin

すべての兄弟要素の代わりに

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

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

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

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

要素を繰り返したいだけなので、

の代わりに.footnoteを使用します。 nth-of-type()

.footnoteから最後のマージンステートメントを削除することを忘れないでください。私たちの脚注は両側にあります。脚注ごとに小さな三角形も追加されたことに気付きましたが、これはこの記事の範囲を超えています。 ビュー駆動型のアニメーション

ポップアップアニメーションの作成を開始しましょう。ビューとスクロールドライブアニメーションの両方が可能な限り直感的であるため、これは最も簡単な部分であることがわかりました。まず、Common

を使用してアニメーションを登録します。私たちが望んでいるのは、脚注を見えないようにしてから、ゆっくりと大きく見えるようにすることです。

これは私たちのアニメーションです。今では、それぞれに追加する必要があります@keyframes：

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

これ自体は何もしません。通常、開始するために.footnoteを設定します。ただし、ビュー駆動型のアニメーションは設定された時間を実行しませんが、アニメーションの進行状況は画面上の要素の位置に依存します。これを行うには、

を

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

に設定します。

animation-duration animation-timelineこれにより、要素が画面を離れるとアニメーションが終了します。より読みやすい位置で終わることを望んでいます。最後のタッチは、view()から

を設定することです。つまり、「ビューが0％であるときに要素を開始し、ビューで40％の場合に終了するようにしたい。」

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

」を意味します。

animation-rangeBramusの驚くべきツールは、スクロールとビュー駆動型のアニメーションにもっと焦点を当てており、cover 0% cover 40%

モバイル端末を実行したらどうすればよいですか？

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

この脚注メソッドは、記事の両側にスペースがないため、小さな画面では動作しないことに気付いたかもしれません。修正は非常に簡単です。脚注は、小さな画面に通常の脚注として、また大画面にコメントとして表示されます。これは、画面が特定のしきい値（約1000ピクセル）よりも大きい場合にのみコメントを表示することで行うことができます。そうでない場合、コメントは、Webで見つけた他のコメントと同様に、記事の本文に表示されます。 animation-range

さて、私たちのコメントは、十分なスペースがある場合にのみ、両側に表示されます：

要約

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

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

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

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

情熱を持っているコンテンツを書くことも好きなら、しばしばランダムな接線に入るか、各段落にコメントを追加して追加のコンテキストを提供したいと思うでしょう。少なくとも、それは私の場合ですので、コメントを動的に表示できることは良い追加です。特に、CSSだけでこれを行うことができるとき - これは1年前にできなかったことです！

以上がCSSアンカーポジショニングとビュー駆動型アニメーションを使用したコメントをポップしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。