スクロール駆動の粘着性の見出し

スクロール駆動型のアニメーションは素晴らしいです！これらは、開発者が要素の動きと変換をユーザーのスクロール位置に直接結び付けることができる強力なツールです。このテクニックは、インタラクティブな体験を作成し、表示する画像をキングする、ステージを横切って滑るテキスト、背景を微妙に変える新しい方法を開きます。思慮深く使用されているスクロール駆動型アニメーション（SDA）は、ウェブサイトをよりダイナミックで魅力的で、応答性の高い感じにすることができます。

数週間前、私はスクロール駆動型のアニメーションで遊んでいました。そのとき、メイン見出し（H1）のテキストをアニメーション化し、SDAを使用して、ページ上のユーザーのスクロール位置に基づいて見出し自体を変更するアイデアを思いつきました。この記事では、そのアイデアを分解し、段階的に再構築します。これは、私たちが向かう一般的な方向であり、フルスクリーンでより良く見え、Chromiumブラウザーで表示されます。

この例の効果は、スクロール駆動型アニメーションをサポートするブラウザでのみ機能することに注意することが重要です。 SDAがサポートされていない場合、静的見出しに適切なフォールバックがあります。アクセシビリティの観点から、ブラウザがモーションを削減した場合、またはページにAssistiveテクノロジーでアクセスされている場合、効果は無効になり、ユーザーはすべてのコンテンツを完全に意味のあるアクセス可能な方法で取得します。

簡単なメモ：このアプローチは、キーフレームのいくつかの「マジックナンバー」に依存しています。これについては後で説明します。それらは驚くほど反応しますが、この方法は静的コンテンツに最適であり、非常にダイナミックなWebサイトには理想的ではありません。

アニメーションを詳しく見てください

スクロール駆動のアニメーションに飛び込む前に、テキストアニメーション自体と実際にどのように機能するかを見てみましょう。これは、数年前にタイプライター効果を作成したいと思ったアイデアに基づいています。当時、私が発見した方法のほとんどは、モノスペースフォントまたは固体の背景を使用して要素の幅をアニメーション化することを伴いました。どれも私のためにうまくいきませんでした。それで、私はコンテンツ自体をアニメーション化する方法を探しましたが、解決策は、しばしば擬似要素でした。

Pseudo-Elementsにはコンテンツプロパティがあり、そのテキストをアニメーション化することができます。アニメーションは正確ではありませんが、コンテンツを動的に変更できます。クールな部分は、変化する唯一のものはテキスト自体であり、他のトリックは必要ないということです。

しっかりした基盤から始めます

テキストアニメーションの背後にあるトリックがわかったので、それをスクロール駆動型アニメーションと組み合わせる方法を見て、しっかりとしたアクセス可能なフォールバックがあることを確認してください。

いくつかの基本的なセマンティックマークアップから始めます。すべてをメイン要素に包み、個々のセクションを内部にします。各セクションでは、テキストや画像などの独自の見出しとコンテンツがあります。この例では、4つのセクションをセットアップしました。それぞれに、それぞれがテキストといくつかの画像があり、すべてプライマリカラーです。

<main>
  <section>
    <h1>一次色</h1>
    <p>3つの主要な色（赤、青、黄色）は、カラーホイール上の他のすべての色の基礎を形成します。それらをさまざまな組み合わせで混ぜると、幅広い色合いが生成されます。</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228405842915.jpg" class="lazy" alt="スクロール駆動の粘着性の見出し">
  </section>
  
  <section>
    <h2>赤いパワー</h2>
    <p>赤は大胆で鮮やかな色で、エネルギー、情熱、暖かさを象徴しています。それは簡単に注目を集め、しばしば強い感情とリンクしています。</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406079019.jpg" class="lazy" alt="スクロール駆動の粘着性の見出し">
  </section>
  
  <section>
    <h2>青い穏やか</h2>
    <p>青は落ち着いて涼しい色で、静けさ、安定性、信頼を表しています。それは空と海の画像を呼び起こし、平和な気分を作り出します。</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406146761.jpg" class="lazy" alt="スクロール駆動の粘着性の見出し">
  </section>
  
  <section>
    <h2>黄色い喜び</h2>
    <p>黄色は明るく陽気な色で、光、楽観主義、創造性を表しています。それは非常に目立つものであり、幸福と希望をもたらします。</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406273727.jpg" class="lazy" alt="スクロール駆動の粘着性の見出し">
  </section>
</main>

スタイリングに関しては、私はこの段階で特別なことをしていません。基本だけです。フォントを変更し、テキストと見出しサイズを調整し、メインとセクションのディスプレイをセットアップし、オブジェクトフィットで画像サイズを修正しました。

したがって、この時点で、静的、セマンティック、アクセス可能なコンテンツを備えたシンプルなサイトがあります。これは素晴らしいことです。今目標は、効果を追加し始めると、そのようにとどまることを確認することです。

2番目の最初の見出し

まず、メインの上部に別のH1要素を追加することから始めます。この新しい要素は、ユーザーのスクロール位置に従って更新され、アニメーションテキストのプレースホルダーとして機能します。そして、はい、最初のセクションにはすでにH1があることを知っています。それは大丈夫で、一度に1つだけにアクセスできるように、すぐに対処します。

<h1 aria-hidden="true">一次色</h1>

この見出しにaria-hidden = "true"を追加したので、スクリーンリーダーには拾われないことに注意してください。これで、スクリーンリーダー向けのクラスを他のすべての見出しに追加できます。このようにして、コンテンツを「通常」に表示する人は誰でもアニメーション化された見出しのみが表示されますが、支援テクノロジーユーザーは通常の静的セマンティック見出しを取得します。

注： .sronlyクラスのスタイルは、スコットオハラの「包括的に隠された」に基づいています。

サポートの取り扱い

アクセシビリティが重要であると同様に、私たちが心に留めておく必要がある別の懸念があります：サポート。 CSSスクロール駆動型のアニメーションは素晴らしいですが、どこでも完全にはサポートされていません。そのため、SDAをサポートしていないブラウザに静的バージョンを提供することが重要です。

最初のステップは、ディスプレイ：なしを使用して追加したアニメーション見出しを非表示にすることです。次に、新しい@supportsブロックを追加して、SDAサポートを確認します。 SDAがサポートされているブロック内では、見出しのディスプレイを変更できます。

.sronlyクラスも@supportsブロックに移動する必要があります。これは、効果がサポートされていない場合ではなく、アクティブな場合にのみ適用したいためです。このように、Assistive Technologyと同様に、SDAサポートのないブラウザでページにアクセスする人は誰でも静的なコンテンツを取得します。

 .scrolldrivenheading {
  表示：なし;
}

@supports（animation-timeline：scroll（））{
  .scrolldrivenheading {
    表示：ブロック;
  }
  
  / *スクリーンリーダーのみ */
  .sronly {
    クリップ：rect（0 0 0 0）; 
    クリップパス：挿入図（50％）;
    高さ：1px;
    オーバーフロー：隠し;
    位置：絶対;
    ホワイトスペース：nowrap; 
    幅：1px;
  }
}

粘着性があります

次に行う必要があるのは、見出しの粘着性を処理することです。見出しが常に画面にとどまることを確認するために、その位置を上部に付着させるように設定します：0でビューポートの上部に固執します。

私たちがそれに取り組んでいる間、背景を含むいくつかの基本的なスタイリングを追加しましょう。テキストが見出しの背後にあるものとブレンドされない、間隔のための少しのパディング、ホワイトスペース：Nowrapは、1つのラインに見出しを保持します。

 / * @supportsブロック内 */
.scrolldrivenheading {
  表示：ブロック;
  位置：粘着性;
  上：0;
  背景画像：線形勾配（0DEG、透明、ブラック1EM）;
  パディング：0.5EM 0.25EM;
  ホワイトスペース：nowrap;
}

これですべてがセットアップされました。通常の条件では、ページの上部に1つの粘着性の見出しが表示されます。また、誰かがSDAをサポートしていない支援技術またはブラウザを使用している場合、通常の静的コンテンツを取得します。

これで、テキストのアニメーションを開始する準備が整いました。ほとんど…

魔法の数字

テキストアニメーションを構築するには、テキストがどこに変更されるかを正確に知る必要があります。 SDAを使用すると、スクロールは基本的にタイムラインになり、アニメーションをトリガーするためのタイムラインの正確なポイントを決定する必要があります。

これを容易にし、それらの位置を特定するために、次のスクリプトを準備しました。

 @property  -  scroll-position {
  構文： "<number> ";
  継承：false;
  初期値：0;
}

ボディ::後{
  カウンターリセット：sp var（ - スクロールポジション）;
  コンテンツ：カウンター（sp） "％";
  位置：修正;
  上：0;
  左：0;
  パディング：1EM;
  バックグラウンドカラー：マルーン;
  アニメーション：スクロールポジションステップ（100）;
  Animation-Timeline：scroll（）;
}

@keyframes scrollposition {
  0％{ -  scroll-position：0; }
  100％{ -  scroll-position：100; }
}</number>

このコードに深く入りたくありませんが、アイデアは、次に使用するために使用してテキストをアニメーション化し、スクロールの進行状況に基づいて0から100までのカスタムプロパティ（-SCROLL-POSITION）をアニメーション化し、コンテンツにその値を表示するために使用して、それを使用することです。

コードの冒頭にこれを追加すると、画面の左上隅に小さな赤い正方形が表示され、現在のスクロール位置がパーセンテージとして（キーフレームと一致するように）表示されます。これにより、必要なセクションにスクロールして、各見出しが開始される場合の割合を簡単にマークすることができます。

この方法と少しの試行錯誤により、私は見出しを30％、60％、および90％で変更したいことがわかりました。それで、私たちは実際にそれを行うのですか？アニメーションを始めましょう。

テキストのアニメーション

まず、.scrolldrivenheading要素内のコンテンツをクリアして、空で動的なコンテンツの準備ができているようにします。 CSSでは、テキストをアニメーション化するために使用する見出しに擬似要素を追加します。空のコンテンツを与え、アニメーション名を設定し、もちろん、アニメーションタイムラインをスクロール（）に割り当てます。

また、個別のタイプであるコンテンツプロパティをアニメーション化しているため、値間でスムーズに遷移しません。ただジャンプするだけです。アニメーションタイミング機能プロパティをステップエンドに設定することにより、定義するキーフレームで各変更が正確に発生することを確認します。そのため、テキストは、その中間ではなく、必要な場所に正確に切り替わります。

 .scrolldrivenheading {
  / * style */

  ＆：：後 {
    コンテンツ： '';
    アニメーション名：HeadingContent;
    アニメーション - タイミング機能：ステップエンド;
    Animation-Timeline：scroll（）;
  }
}

キーフレームに関しては、この部分は非常に簡単です（今のところ）。最初のフレーム（0％）を最初の見出しに設定し、他の見出しを以前に見つけた割合に割り当てます。

 @keyframes headingcontent {
  0％{content： 'プライマリカラー'}
  30％{content： 'Red Power'}
  60％{content： 'Blue Calm'}
  90％、100％{content： 'Yellow Joy'}
}

そのため、スクロールするときに更新する粘着性の見出しがあるサイトがあります。

しかし、待ってください、今はすぐに切り替わります。アニメーションはどこですか？！これが面白くなるところです。 JavaScriptや文字列の操作を使用していないため、キーフレームを自分で書く必要があります。最良のアプローチは、到達したいターゲットの見出しから始めて、後方に構築することです。したがって、1番目と2番目の見出しの間でアニメーション化したい場合は、次のようになります。

 @keyframes headingcontent {
  0％{content： 'プライマリカラー'}
  
  9％{content： 'プライマリカラー'}
  10％{content： 'Primary Colo'}
  11％{content： 'primary col'}
  12％{content： 'Primary Co'}
  13％{content： 'プライマリC'}
  14％{content： 'primary'}
  15％{content： 'primary'}
  16％{content： 'primar'}
  17％{content： 'prima'}
  18％{content： 'prim'}
  19％{content： 'pri'}
  20％{content： 'pr'}
  21％{content： 'p'}
  
  22％{content： 'r'}
  23％{content： 're'}
  24％{content： 'red'}
  25％{content： 'red'}
  26％{content： 'red p'}
  27％{content： 'red po'}
  28％{content： 'Red Pow'}
  29％{content： 'Red Powe'}
  
  30％{content： 'Red Power'}
  60％{content： 'Blue Calm'}
  90％、100％{content： 'Yellow Joy'}
}

必要に応じて手紙を削除または追加するたびに、毎回1％戻ってきました。他のケースでは、常に1％ではなく、別のステップサイズを使用することをお勧めします。たとえば、より多くの言葉で長い見出しでは、おそらく小さなステップが必要です。

他のすべての見出しに対してこのプロセスを繰り返すと、完全にアニメーション化された見出しになります。

ユーザーの設定

以前にアクセシビリティについて話し、コンテンツが支援技術でうまく機能することを確認しましたが、留意すべきことはもう1つあります。これはこの種のアニメーションの厳格なWCAG要件ではありませんが、前庭の感受性を持つ人々に大きな違いをもたらす可能性があるため、アニメーションなしでコンテンツを表示する方法を提供することをお勧めします。

アニメーション化されていない代替品を提供したい場合は、@Supportsブロックをより好ましいモーションクエリでラップすることだけです。

 @media画面と（還元モーションを好む：no-preference）{
  @supports（animation-timeline：scroll（））{
    / * style */
  }
}

レベルアップ

バリエーションについて話しましょう。前の例では、見出しテキスト全体をアニメーション化しましたが、それを行う必要はありません。必要な部分だけをアニメーション化し、追加のアニメーションを使用して効果を高め、物事をより面白くすることができます。たとえば、ここでは、テキスト「プライマリカラー」を固定したままにし、アニメーション化されたテキストを処理するスパンを追加しました。

<h1 aria-hidden="true">
  原色<span></span>
</h1>

そして、私は今では別のスパンを持っているので、各値に合わせてその色をアニメーション化することもできます。

次の例では、テキストアニメーションをスパンに保持しましたが、テキストの色を変更する代わりに、バックグラウンドカラーを変更するために、見出し自体に別のスクロール駆動型アニメーションを追加しました。このようにして、必要な数のアニメーションを追加して、好きなものを変更することができます。

あなたの番です！

CSSスクロール駆動型アニメーションは、単なるクールなトリックではありません。彼らは、Webデザインのまったく新しい世界への扉を開くゲームチェンジャーです。わずかな創造性で、最も普通のページをインタラクティブで記憶に残る、本当に魅力的なものに変えることができます。可能性は、ユーザーエクスペリエンスを向上させる微妙な効果から、サイトを際立たせるワイルドなアニメーション化された移行まで、実際には無限です。

それで、あなたは巻物駆動のアニメーションで何を構築しますか？この新しい超大国で何を作成しますか？試してみて、実験してください。クールなもの、いくつかのアイデア、ワイルドな実験、または奇妙な失敗さえも持っていれば、それらについて聞いてみたいです。他の人が何を思いつくのかを常に楽しみにしているので、以下の作品、質問、またはフィードバックを自由に共有してください。

例を確認し、すべてにアクセスできることを確認し、貴重なアドバイスと改善に貢献してくれたCristianDíazに感謝します。

以上がスクロール駆動の粘着性の見出しの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。