CSSを使用したスクロールエフェクトでテキストを作成する方法

純粋なCSSは、スクロールトリガーされたテキスト表示効果を直接実現することはできませんが、少量のJavaScriptとCSS遷移アニメーションを組み合わせることで効率的に実装できます。特定の方法は、JavaScriptを使用して、要素がビューポートに入り、「公開された」クラスを追加するかどうかを検出することです。 CSSは、透明性と変位の遷移効果を定義する責任があります。交差点オブザーバーAPIを使用してパフォーマンスを改善し、最終的にはスムーズでエレガントなスクロールテキストディスプレイ効果を実現することをお勧めします。

CSSを使用したスクロール効果に関するテキストの作成を作成することは、Webページに微妙な相互作用を追加するためのクリーンでパフォーマンスのある方法です。純粋なCSSには、スクロールベースのアニメーションに関しては制限がありますが（CSSだけではスクロール位置を直接検出できないため）、スクロール検出のために最小限のJavaScriptと組み合わせたCSSを使用して、説得力のあるテキスト明らかな効果を実現できます。効果的に行う方法は次のとおりです。

1.スクロール検出にはJavaScriptを使用してCSSを使用します

真の「スクロール」効果では、JavaScriptがユーザーのスクロール位置を監視し、要素が表示されたときにクラスの変更をトリガーする必要があります。ただし、実際のアニメーションとスタイリングはCSSによって処理されます。

基本的なHTML構造

<div class = "revele container">
  <p class = "text-to-reveal">このテキストは、スクロールするときに明らかになります。</p>
</div>

CSS：明らかなアニメーションを定義します

.text-to-reveal {
  不透明：0;
  変換：Translatey（20px）;
  トランジション：不透明度0.8s断念、0.8sの容易さを変換します。
}

.text-to-reveal.revealed {
  不透明：1;
  変換：翻訳（0）;
}

これにより、テキストが見えないようになり、最初はわずかにシフトします。 revealedクラスが追加されると、それはフェードインしてスムーズに上昇します。

JavaScript：スクロールにクラスを追加します

const textelements = document.QuerySeLectorall（ '。テキストから革新'）;

const leveryonscroll =（）=> {
  textelements.foreach（el => {
    const elementtop = el.getBoundingClientRect（）。top;
    const windowheight = window.innerheight;

    //要素がビューポートにある場合
    if（elementtop <windowheight * 0.8）{
      el.classlist.add（ &#39;leaved&#39;）;
    }
  }）;
};

//ロードで実行してスクロールします
window.addeventlistener（ &#39;load&#39;、leveryonscroll）;
window.addeventlistener（ &#39;scroll&#39;、leveryonscroll）;

このスクリプトは、各.text-to-reveal要素がビューポートの高さの80％以内であるかどうかをチェックします。 0.8調整して、公開が発生したときに制御できます（例えば、以前に0.7 、完全に見える場合は1 ）。

2。オプション：再利用性のためにCSSカスタムプロパティを使用します

CSS変数を使用することにより、効果をより柔軟にすることができます。

 .reveal-container {
  -reveal-delay：0.2s;
}

.text-to-reveal {
  不透明：0;
  変換：Translatey（20px）;
  トランジション：不透明度0.8s断念、0.8sの容易さを変換します。
  トランジションデレイ：var（ -  revelie-delay、0s）;
}

.text-to-reveal.revealed {
  不透明：1;
  変換：翻訳（0）;
  トランジションデレイ：var（ -  revelie-delay、0s）;
}

これで、要素ごとのタイミングを制御できます。

 <div class = "revele container" style = " -  reveal-delay：0.3s;">
  <p class = "text-to-reveal">は少し後で</p>を明らかにします
</div>

3。パフォーマンスのヒント

• パフォーマンスの問題を防ぐために、スクロールイベントを絞ります。

   ISSCROLLING = false;
  window.addeventlistener（ 'scroll'、（）=> {
    if（！isscrolling）{
      window.requestanimationframe（（）=> {
        rebrowenscroll（）;
        isscrolling = false;
      }）;
      isscrolling = true;
    }
  }）;

• アニメーションにtransformとopacity使用します - それらはGPUアクセラレーションされており、 marginやtopアニメーションよりも優れています。

• リスナーをあまりにも多くの要素に添付しないでください。複数の明らかな要素に単一のオブザーバーパターンを使用することを検討してください。

4。代替：交差点オブザーバーを使用する（推奨）

パフォーマンスとクリーンなコードを改善するには、 IntersectionObserver APIを使用してください。

 const observer = new IntersectionObserver（（エントリ）=> {
  entries.foreach（entry => {
    if（entry.isinterSecting）{
      entry.target.classlist.add（ 'leaved'）;
      //オプション：公開後に観察を停止します
      Observer.unobserve（entry.target）;
    }
  }）;
}、{しきい値：0.1}）; //トリガー要素の10％が表示されている場合

document.QuerySeLectorall（ '。テキストからreveal'）。foreach（el => {
  Observer.observe（el）;
}）;

これは、すべてのスクロールイベントを聴くよりも効率的であり、スクロールベースの公開の最新の標準です。

基本的に、CSSのみを使用して真のスクロールトリガーの公開を行うことはできませんが、最小限のJavaScriptとスムーズなCSS遷移を組み合わせることで、強力でパフォーマンスのあるテキスト明らかな効果が得られます。 IntersectionObserverを使用して最良の結果を得て、アニメーションを微妙に保ち、プロの外観にします。

以上がCSSを使用したスクロールエフェクトでテキストを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。