JavaScript と CSS でオンスクロール アニメーションを作成する方法

基本的にクールな企業 Web サイトをすべて見て、スクロールするとテキストが上にスライドすることに気づいたことがありますか? (Apple の Web サイトを参照) あまりにも一般的なことなので、この質問にはたくさんの答えがあると思いますよね?しかし、多くのオンライン チュートリアルをスクロールした結果、スクロール時に表示されるアニメーションが見つからなかったので、自分で作成しました。

HTML (ダンダンダン!!!)

HTML は非常に単純です。要素を作成するだけ

テキスト

そしてクラスをアタッチします>

完全な HTML (要素は変更できることに注意してください。簡単にするために

を使用しました。):

<p>



</p><h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

ここで何が起こっているのですか？ .animate-scroll クラスはアニメーションを宣言します。実際にアニメーションを作るコードです。別のものを作成することもできますが、私が見た中で最も一般的なものであるため、スライドアップ フェードイン アニメーションを作成しました。ただし、.animate-scroll.visible は、アニメーションが終了したときの要素の状態を示します。 .animate-scroll を変更する場合は、これも変更する必要があります。たとえば、サイズを変更する場合は、size:100% と入力する必要があります。とか。ただし、これを行う方法についての簡単なチュートリアルが必要なだけの場合は、何も変更しないでください。

JavaScript

この簡単な JavaScript をコピーします:

document.addEventListener('DOMContentLoaded', () => {
    const elements = document.querySelectorAll('.animate-scroll');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.9
    });

    elements.forEach(element => {
        observer.observe(element);
    });
});

うわー！とてもたくさんのコードがあります!何が起こっていますか！段階的に見ていきましょう。
まず、document.addEventListener('DOMContentLoaded', () => はコンテンツがロードされているかどうかを検出しています。これは単に「関数」を実行するだけです。
const 要素 = document.querySelectorAll('.animate-scroll');これでクラスが見つかります。 HTML と CSS のクラスを変更する場合は、これも変更します。
const observer = new IntersectionObserver((entries) => {entries.forEach(entry => これにより、要素がビューポート内にあるかどうかが検出されます。そうでない場合は、アニメーション化されません。
if (entry.isIntersecting) {entry.target.classList.add('visible');} これはアニメーションが終了したかどうかを検出します。存在する場合は、.visible を CSS に追加します。だからこそそこにあるのです!
しきい値: 0.9 これは、アニメーション化する前にページ上にどのくらいの量が存在するかを計算します。 0 は、ピクセルがページに到達するとすぐです。 1 はページの約 25% にあるときです。 2 は約 50% です...ユーザーがテキストをあまり長く隠さずにアニメーションが表示される可能性を考慮して、約 0.9 に保つのが好きです。
elements.forEach(element => {observer.observe(element); これは要素を観察するだけです。説明するのはちょっと無意味です。それはページ上にありますか? これはそれを処理します。

最終的なコードは…

私の素晴らしい説明を読むのが面倒ですか?すべてのコードは次のとおりです。

HTML:

<p>



</p><p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript:

<p>



</p><h2>
  
  
  The CSS
</h2>

<p>Now for the CSS. This part is easy. Copy the following code:<br>
</p>

<pre class="brush:php;toolbar:false">.animate-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

それだけです!この詳細についての説明が気に入っていただければ幸いです。質問やコメントがある場合、またはこれを書いた有名な人と話したい場合は、コメントを残してください。ぜひご提案をお待ちしております!

読んでいただきありがとうございます、CodeMonster

以上がJavaScript と CSS でオンスクロール アニメーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。