〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

【JavaScript】人の目を引きつけるスクロールアニメーションを実装

ハック君
ハック君

編集長(・vv・) スクロール アニメーションについて下記の内容が分かりません???
教えて下さい(◎_◎) ン?


・よくスクロールしていくとふわっーーと出でくるようにしたい
・そもそもどのプログラム言語で実装するのかわからない

UIHACK
編集長
UIHACK 編集長

ハック君(^ ^)質問ありがとう♪
スクロールアニメーションを実装する方法を解説していくね!

JavaScript スクロールアニメーションの基本と実装方法

JavaScriptのスクロールアニメーションは、ウェブページ上でユーザーがスクロールするときに要素に動きや効果を追加する技術です。スクロールアニメーションは、要素がスクロールされるにつれて表示、移動、変形、フェードイン/フェードアウトなどのアニメーション効果を適用することができます。

スクロールアニメーションは、さまざまな方法で実装できます。JavaScriptを使用してスクロールイベントを監視し、要素のスタイルやクラスを変更することでアニメーションを制御する方法が一般的です。また、CSSのトランジションやアニメーションプロパティを組み合わせて使用することもあります。

UIHACK
編集長
UIHACK 編集長

先に完成系のデモを見てみましょうΣ(,,ºΔº,,*)

完成系のデモ

ハック君
ハック君

ページののロード後に、スクロールする要素1ってのが、ゆっくりフェードインしてきますね😦

UIHACK
編集長
UIHACK 編集長

そうそう!それでは、HTML、CSS、Javascrptのレビューしていくね

HTML
<div class="container">
  <div class="box">スクロールする要素1</div>
  <div class="box">スクロールする要素2</div>
  <div class="box">スクロールする要素3</div>
</div>
UIHACK
編集長
UIHACK 編集長

解説

このHTMLコードでは、.containerクラスの要素内に、スクロールする要素として3つの.boxクラスの要素が含まれています。これらの要素はスクロールイベントに応じて表示制御が行われます。

CSS
.container {
  height: 2000px; /* スクロールするための高さを設定 */
  padding-top: 800px; /* テスト用のスペースを追加 */
}

.box {
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.box.show {
  opacity: 1;
}
UIHACK
編集長
UIHACK 編集長

解説

このCSSコードでは、.containerクラスの要素の高さが2000ピクセルに設定され、スクロールが可能になるようになっています。.boxクラスの要素は初めは透明(opacity: 0)になっており、.box.showクラスが追加されることで不透明(opacity: 1)になり、表示されるようになります。また、transitionプロパティを使用して、要素の不透明度の変化が0.5秒かけて行われるように設定されています。

Javascript
const boxes = document.querySelectorAll(".box");
let timeout;

window.addEventListener("scroll", () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    const triggerBottom = (window.innerHeight / 5) * 4;

    boxes.forEach((box) => {
      const boxTop = box.getBoundingClientRect().top;

      if (boxTop < triggerBottom) {
        box.classList.add("show");
      } else {
        box.classList.remove("show");
      }
    });
  }, 100); // スクロールイベントの発火を100ミリ秒遅延させる
});
UIHACK
編集長
UIHACK 編集長

解説

このJavaScriptコードでは、.boxクラスの要素を取得し、スクロールイベントを監視します。スクロールイベントが発生するたびに、指定の処理が実行されます。具体的には、triggerBottom変数を計算し、各.box要素の位置を監視します。要素の頭部分がtriggerBottomよりも上にある場合、.box.showクラスが追加され、要素が表示されます。

逆に、要素の頭部分がtriggerBottom以下にある場合は、.box.showクラスが削除され、要素が非表示になります。また、スクロールイベントの発火を100ミリ秒遅延させるために、setTimeout関数が使用されています。

UIHACK
編集長
UIHACK 編集長

以上がHTML、CSS、JavaScriptのコードの説明です。これらのコードを組み合わせることで、スクロールに応じて要素が表示されるスクロールアニメーションが実現されます。

Intersection Observe apiで実装してみよう

次に、Intersection Observer apiは、要素がビューポートに入ったり出たりするときにコールバックを実行するためのAPIです。これを使用すると、要素の表示制御を簡単に実装できます。

UIHACK
編集長
UIHACK 編集長

先に完成系のデモを見てみましょうΣ(,,ºΔº,,*)

完成系のデモ

ハック君
ハック君

オォー!これもスクロールする要素1というテキストが後で、出てきますね

UIHACK
編集長
UIHACK 編集長

そうそう!Intersection Observer APIを使用することで、処理を簡単に行うことができるんだよ。

HTML
<div class="box" id="box1">要素1</div>
<div class="box" id="box2">要素2</div>
<div class="box" id="box3">要素3</div>
UIHACK
編集長
UIHACK 編集長

解説

3つの要素が.boxクラスで指定されています。後は説明は不要かな

CSS
.box {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.box.show {
  opacity: 1;
  transform: translateY(0);
}
UIHACK
編集長
UIHACK 編集長

解説

.boxクラスの要素に対して初めは透明で下方向に移動した状態にスタイルを設定し、.box.showクラスが追加されると不透明になり、元の位置に戻るアニメーションが発生するようになっています。これにより、スクロールや要素の表示状態に応じて要素のアニメーションが制御されます。

Javascript
const boxes = document.querySelectorAll(".box");

const options = {
  threshold: 0.2,
};

const animateBoxes = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("show");
    } else {
      entry.target.classList.remove("show");
    }
  });
};

const observer = new IntersectionObserver(animateBoxes, options);

boxes.forEach((box) => {
  observer.observe(box);
});
UIHACK
編集長
UIHACK 編集長

解説

Intersection Observerを使用して各要素が表示領域に入った場合にshowクラスを追加し、要素のアニメーションをトリガーします。

要素が表示領域に入るとentry.isIntersectingtrueになり、要素にshowクラスが追加されます。これにより、要素は不透明になり、元の位置に戻るアニメーションが発生します。要素が表示領域から外れるとentry.isIntersectingがfalseになり、showクラスが削除され、要素は再び非表示になります

UIHACK
編集長
UIHACK 編集長

解説

上記のコードを使用することで、複数の要素に対してIntersection Observerを適用し、それぞれの要素に異なるアニメーションを設置できます。各要素が表示される位置に到達すると、指定したアニメーションが発生し、要素が表示されます。

Intersection Observer APIの概要

Intersection Observer APIは、要素のビューポートとの交差(Intersection)を監視するためのJavaScriptのAPIです。このAPIを使用すると、要素がビューポートに入ったり出たりする際に、指定したコールバック関数を実行することができます。

Intersection Observer APIは、スクロールや要素の可視性に関連するタスクを処理する際に非常に便利です。従来の方法では、スクロールイベントを監視したり、要素の位置を計算したりする必要がありましたが、Intersection Observer APIを使用することで、これらの処理を簡単に行うことができます。

APIの基本的な要素は以下のとおりです。

Intersection Observer

要素の交差を監視するためのオブジェクトです。new IntersectionObserver(callback, options)を使用してインスタンスを作成します。コールバック関数とオプションを指定します。

コールバック関数

監視している要素とビューポートの交差が変化したときに呼び出される関数です。この関数は、entriesという配列を引数に受け取り、各エントリーに対して処理を行います。

エントリー(IntersectionObserverEntry)

コールバック関数に渡されるオブジェクトで、監視している要素とビューポートの交差に関する情報を提供します。エントリーには要素の位置、交差の割合、交差が発生したかどうかなどの情報が含まれます。

オプション

Intersection Observerを作成する際に指定するオプションです。監視の詳細をカスタマイズするために使用されます。主なオプションは、root(監視するルート要素)、threshold(交差を検出する閾値)、rootMargin(ルート要素に追加のマージンを設定)などです。

Intersection Observer APIのメリット

UIHACK
編集長
UIHACK 編集長

解説

以上のメリットから、Intersection Observer APIは、パフォーマンスの向上、動的な要素への対応、高度な制御性、複数要素の管理といった特長があります。これにより、要素の可視性やスクロールに関連するタスクを効率的に処理し、柔軟なアニメーションや操作を実現することができます。

結論とまとめ

この記事では、JavaScriptを活用したスクロールアニメーションの基本と実装方法を詳しく解説しました。

UIHACK
編集長
UIHACK 編集長

ぜひ、この記事を参考にしてJavaScriptを使用したスクロールアニメーションを実装し、ウェブデザインのクオリティを高めましょう。詳細な手順やコードの説明は記事をご覧いただき、より深く理解してください。素晴らしいスクロールアニメーションを作成することを楽しみにしています!

以下にまとめの内容とおすすめの記事をおいておきます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です