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

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

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

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

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

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

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

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

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

いくつかの基本的なセマンティックマークアップから始めます。すべてをメイン要素に包み、個々のセクションを內(nèi)部にします。各セクションでは、テキストや畫像などの獨自の見出しとコンテンツがあります。この例では、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>黃色は明るく陽気な色で、光、楽観主義、創(chuàng)造性を表しています。それは非常に目立つものであり、幸福と希望をもたらします。</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>

スタイリングに関しては、私はこの段階で特別なことをしていません?；兢坤堡扦?。フォントを変更し、テキストと見出しサイズを調(diào)整し、メインとセクションのディスプレイをセットアップし、オブジェクトフィットで畫像サイズを修正しました。

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

2番目の最初の見出し

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

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

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

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

サポートの取り扱い

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

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

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

 .scrolldrivenheading {
  表示：なし;
}

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

粘著性があります

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

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

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

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

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

魔法の數(shù)字

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

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

 @property  -  scroll-position {
  構(gòu)文： "<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）をアニメーション化し、コンテンツにその値を表示するために使用して、それを使用することです。

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

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

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

まず、.scrolldrivenheading要素內(nèi)のコンテンツをクリアして、空で動的なコンテンツの準備ができているようにします。 CSSでは、テキストをアニメーション化するために使用する見出しに擬似要素を追加します?？栅违偿螗匹螗膜蚺cえ、アニメーション名を設定し、もちろん、アニメーションタイムラインをスクロール（）に割り當てます。

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

 .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や文字列の操作を使用していないため、キーフレームを自分で書く必要があります。最良のアプローチは、到達したいターゲットの見出しから始めて、後方に構(gòu)築することです。したがって、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>

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

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

あなたの番です！

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

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

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

以上がスクロール駆動の粘著性の見出しの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。