JavaScriptでページスクロールアニメーションを実装する

JavaScriptでページスクロールアニメーションを実装する

フロントエンドの UI エフェクトを作成する場合、スクロール位置に応じて要素をアニメーション化することは非常に一般的なデザインです。通常、これを実現するにはサードパーティのプラグインまたはライブラリを使用します。このチュートリアルでは、純粋な JavaScript と CSS を使用してこれを行う方法を説明します。

まず効果をプレビューします。

アニメーションを実装するために CSS を使用し、必要なスタイルのトリガーを処理するために JavaScript を使用します。まずはレイアウトを作成しましょう。

レイアウトを作成する

まず HTML を使用してページ レイアウトを作成し、次にアニメーション化する必要のある要素に共通のクラス名を割り当てます。後続の JavaScript は、このクラス名を使用してこれらの要素を見つけます。ここでは、スクロールに基づいてアニメーション化する必要がある要素にクラス名 js-scroll を割り当てます。HTML コードは次のとおりです。

<セクションクラス="スクロールコンテナ">
  <div class="scroll-element js-scroll"></div>
  <div class="scroll-caption">このアニメーションは上からフェードインします。</div>
</セクション>

CSSスタイルを追加する

まずは、シンプルなフェードイン アニメーション効果から始めましょう。

.js-スクロール{
  不透明度: 0;
  遷移: 不透明度 500ms;
}

.js-scroll.scrolled {
  不透明度: 1;
}

ページ上のすべての js-scroll 要素は非表示になり、不透明度は 0 になります。この要素領域までスクロールすると、.scrolled クラス名を追加して表示されるようになります。

JavaScript で要素を操作する

レイアウトとスタイルが決まったら、要素がスクロールして表示されるときにクラス名を割り当てる JavaScript 関数を記述する必要があります。

ロジックを簡単に分解してみましょう。

  1. ページ上のすべての js-scroll 要素を取得します。
  2. これらの要素をデフォルトでフェードアウトさせる
  3. 要素がビューポート内にあるかどうかを確認する
  4. 要素がビューポート内にある場合、スクロールクラス名が割り当てられます。

対象要素を取得する

ページ上のすべての js-scroll 要素を取得するには、document.querySelectorAll() を使用します。

定数 scrollElements = document.querySelectorAll('.js-scroll')

デフォルトでは、すべての対象要素をフェードアウトします

これらの要素を反復処理し、すべてをフェードアウトして表示しないようにします。

scrollElements.forEach((el) => {
  el.style.不透明度 = 0
})

要素がビューポート内にあるかどうかを確認する

要素からページの上部までの距離がページの表示部分の高さよりも小さいかどうかを判断することで、要素がユーザーのビューポート内にあるかどうかを検出できます。

JavaScript では、要素とページの上部の間の距離を取得するためにgetBoundingClientRect().topメソッドを使用し、ウィンドウの高さを取得するためにwindow.innerHeightまたはdocument.documentElement.clientHeightを使用します。

上記のロジックを使用してelementInView関数を作成します。

const elementInView = (el) => {
  const 要素 Top = el.getBoundingClientRect().top

  戻る (
    要素上端 <= (window.innerHeight || document.documentElement.clientHeight)
  )
}

この関数を変更して、要素がページ内で x ピクセルスクロールしたかどうかを検出したり、スクロールされたページのパーセンテージを検出したりすることができます。

const elementInView = (el, scrollOffset = 0) => {
  const 要素 Top = el.getBoundingClientRect().top

  戻る (
    要素トップ <=
    (window.innerHeight || document.documentElement.clientHeight) - スクロールオフセット
  )
}

この場合、要素が scrollOffset の量だけページ内にスクロールされている場合、関数は true を返します。少し変更して、scrollOffset パラメータをパーセンテージに変更してみましょう。

const elementInView = (el, パーセンテージスクロール = 100) => {
  const 要素 Top = el.getBoundingClientRect().top

  戻る (
    要素トップ <=
    (window.innerHeight || document.documentElement.clientHeight) *
      (パーセンテージスクロール / 100)
  )
}

この部分では、特定のニーズに応じてロジックを定義できます。

注意:Intersection Observer API[2]を使用しても同じ効果が得られますが、IEはサポートされていません。

要素にクラス名を追加する

要素がページにスクロールされたかどうかを検出できるようになったので、要素の表示を処理する関数を定義する必要があります。この場合は、scrolled クラス名を割り当てて要素を表示します。

const displayScrollElement = (要素) => {
  element.classList.add('スクロール')
}

次に、前のロジックを displayScrollElement 関数と組み合わせ、forEach メソッドを使用してすべての js-scroll 要素でそれを呼び出します。

定数ハンドルスクロールアニメーション = () => {
  scrollElements.forEach((el) => {
    要素がビュー内にある場合(el, 100) {
      表示スクロール要素(el)
    }
  })
}

さらに、要素が表示されなくなった場合は、デフォルトの状態にリセットする必要があります。これは、hideScrollElement を定義することで実行できます。

const hideScrollElement = (要素) => {
  element.classList.remove("スクロールされた");
};

定数ハンドルスクロールアニメーション = () => {
  scrollElements.forEach((el) => {
    要素がビュー内にある場合(el, 100) {
      スクロール要素を表示します(el);
    } それ以外 {
      スクロール要素を非表示にします(el);
    }
  }

最後に、上記のメソッドをウィンドウのスクロール イベント リスナーに渡して、ユーザーがスクロールするたびに実行されるようにします。

window.addEventListener('スクロール', () => {
  スクロールアニメーション処理()
})

スクロールアニメーションの機能を全て実装しました。

完全な例

記事の最初に戻ってレンダリングをご覧ください。これらの要素はさまざまなアニメーションで表示されます。これは、クラス名に異なる CSS アニメーションを割り当てることによって実現されます。この例の HTML は次のとおりです。

<セクションクラス="スクロールコンテナ">
  <div class="scroll-element js-scroll フェードイン"></div>
  <div class="scroll-caption">フェードイン効果</div>
</セクション>
<セクションクラス="スクロールコンテナ">
  <div class="scroll-element js-scroll フェードインボトム"></div>
  <div class="scroll-caption">トップカット効果</div>
</セクション>
<セクションクラス="スクロールコンテナ">
  <div class="scroll-element js-scroll slide-left"></div>
  <div class="scroll-caption">左からカットイン</div>
</セクション>
<セクションクラス="スクロールコンテナ">
  <div class="scroll-element js-scroll slide-right"></div>
  <div class="scroll-caption">右からカットイン</div>
</セクション>

ここでは、異なるアニメーション効果を持つ要素に異なる CSS クラス名を割り当てます。これらのクラスに対応する CSS コードは次のとおりです。

.スクロール.フェードイン{
  アニメーション: フェードイン 1 秒、イーズイン アウト 両方;
}

.スクロールされたフェードインボトム{
  アニメーション: フェードイン下部 1 秒、イーズインアウト両方;
}

.スクロール.左スライド{
  アニメーション: 左にスライドイン、両方に 1 秒イーズインアウト。
}

.スクロール.スライド右{
  アニメーション: 右にスライドイン、1 秒ずつイーズインアウト、両方;
}

@keyframes スライドイン左 {
  0% {
    変換: translateX(-100px);
    不透明度: 0;
  }
  100% {
    変換: translateX(0);
    不透明度: 1;
  }
}

@keyframes スライドイン右 {
  0% {
    変換: translateX(100px);
    不透明度: 0;
  }
  100% {
    変換: translateX(0);
    不透明度: 1;
  }
}

@keyframes フェードインボトム {
  0% {
    変換: translateY(50px);
    不透明度: 0;
  }
  100% {
    変換: translateY(0);
    不透明度: 1;
  }
}

@keyframes フェードイン {
  0% {
    不透明度: 0;
  }
  100% {
    不透明度: 1;
  }
}

さまざまなアニメーション要素が追加されていますが、ロジックは同じままなので、JavaScript コードを変更する必要はありません。つまり、新しい関数を記述しなくても、ページに任意の数の異なるアニメーションを追加できるということです。

スロットルバルブによるパフォーマンスの向上

スクロール リスナーに関数をバインドすると、ユーザーがページをスクロールするたびにその関数が呼び出されます。ページを 500 ピクセルスクロールすると、関数が少なくとも 50 回呼び出されます。ページに多くの要素を含めようとすると、ページの速度が著しく低下する可能性があります。

「スロットル関数」を使用することで関数呼び出しの回数を減らすことができます。スロットル関数は、指定された間隔内で渡された関数を 1 回だけ呼び出す高階関数です。

ユーザーがスクロールするすべてのピクセルを検出する必要がないため、スクロール イベントに特に便利です。たとえば、タイマーが 100 ミリ秒のスロットル関数がある場合、ユーザーが 100 ミリ秒スクロールするごとに関数が 1 回だけ呼び出されます。

スロットル機能は、次のように JavaScript で実装できます。

throttleTimer を false にする

const スロットル = (コールバック、時間) => {
  if (throttleTimer) 戻り値

  // 関数が繰り返し実行されないようにここでマークします throttleTimer = true

  タイムアウトを設定する(() => {
    // 指定された時間が来たら、渡されたコールバック関数 callback() を呼び出します
    スロットルタイマー = false
  }、 時間)
}

次に、ウィンドウ オブジェクトのスクロール イベント リスナーを変更します。

window.addEventListener('スクロール', () => {
  スロットル(ハンドルスクロールアニメーション、250)
})

これで、ユーザーがスクロールすると、handleScrollAnimation 関数が 250 ミリ秒ごとに呼び出されます。

以上がJavaScriptでページスクロールアニメーションを実装する方法の詳細です。JavaScriptページスクロールの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScriptはスクロールバーの位置を取得し、ページをアンカーポイントまでスライドします。
  • マスクを実現し、ページのスクロールを禁止するJavaScript
  • Vue はネイティブ js を使用してスクロール ページ トラッキング ナビゲーション ハイライト サンプル コードを実装します
  • jsはHTMLページのスクロールイベントメソッドを監視します
  • JS を使用してページにスクロールバーがあるかどうかを判断する方法
  • Javascriptはページスクロール時にスマートなナビゲーション配置を実装します
  • js/jquery コントロール ページ 動的読み込み データ スライディング スクロール バー 自動読み込み イベント メソッド
  • js は、記録時にページを更新し、スクロールバーの位置に戻ることを実装します [2 つのオプションが利用可能です]
  • js はスクロールバーの位置を変更せずにページの更新を実装します

<<:  MySQL がエラーを報告: ファイルが見つかりません: './mysql/plugin.frm' 解決策

>>:  CD コマンドを使わずに Linux でディレクトリ/フォルダに入る方法

推薦する

Nginxを再コンパイルしてモジュールを追加する方法

Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...

MySQL 5.7.23 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

毎回インストールチュートリアルを探すのは面倒なので、後で確認できるように手順をバックアップします。解...

Win10にnginxをインストールする方法

会社から、負荷を実装するためにnginxをベースにFordプロジェクトのWebServiceサーバー...

Docker で TLS と CA 認証を有効にする方法

目次1. 証明書を生成する2. リモートを有効にする3. リモート接続3.1 Jenkins接続3....

MySQLのユーザー権限の確認と管理方法の詳細な説明

この記事では、例を使用して、MySQL ユーザー権限を確認および管理する方法を説明します。ご参考まで...

マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQLで一意のサーバーIDを生成する方法

序文MySQL では、server-id を使用してデータベース インスタンスを一意に識別し、それを...

見落としがちなVue.jsのAPIを詳しく解説

目次次のチェックv-model 構文シュガー.sync 修飾子$セット計算プロパティセット要約する次...

MySQL 5.7 の /etc/my.cnf パラメータの紹介

以下は、mysql 5.7 の /etc/my.cnf の一般的なパラメータの一部です。これらを自分...

Bootstrapグリッドの垂直および水平配置の詳細な説明

目次1. Bootstrap グリッドレイアウト2. 垂直方向の配置2.1 行タグの垂直方向の配置を...

jsでユーザー登録機能を実装する

この記事の例では、ユーザー登録機能を実装するためのjsの具体的なコードを参考までに共有しています。具...

MySQL ベースのシーケンス実装方法

チームは新しいフレームを交換しました。すべての新しいビジネスでは、新しいフレームワークと新しいデータ...

MySQL で不明なフィールド名を回避する方法

序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...

WeChatアプレットのスクロールビューが左右連動効果を実現

WeChatアプレットはスクロールビューを使用して左右のリンクを実現します。参考までに、具体的な内容...