【CSS&jQuery】スクロール時にふわっと表示するアニメーション実装方法

2024.05.22

URLをコピーしました！

スクロールでふわっと表示するアニメーションを実装したい
スクロールでふわっと表示するアニメーションにバリエーションが欲しい

このような悩みにお答えします。

スクロールに応じてコンテンツをアニメーションさせる動作はよく要望される仕様の1つです。
また、案件によって動作に細かい違いがあります。

その度に都度調べながらコードを書いていくのは正直大変ですよね。

この記事を読むことで、スクロールに応じたアニメーションから、表示バリエーションまで簡単に実装できるようになります。

早速、詳しい内容を紹介していきます。

この記事を書いた人

すずき

フリーランスでwebデザイナーをしています。
デザインからコーディング、運用まで幅広く対応しています。
3年間で50件以上のサイトをコーディングしてきました。

実際に作成したデモ

まずは私が実際に使用しているデモを紹介します。
基本的に以下のコードでスクロールに応じたアニメーションを実装しています。

See the Pen Untitled by すずき (@k-suzuki3533) on CodePen.

最初は非表示だったコンテンツが、画面に表示されたタイミングでふわっと表示されているかと思います。
ふわっと表示する動作はCSSのみで実装しているので、簡単にカスタマイズ可能です。

以下で詳しく解説していきます。

具体的な実装方法

スクロールでふわっと表示するアニメーションの具体的な実装方法を解説していきます。
HTMLを書き、jQueryを読み込み、CSSで調整するだけなので簡単です。

HTMLの記述

まずはHTMLを記述していきます。
今回は以下のコードです。

<div class="js-scroll -fadein"></div>

私はjQueryの発火用のclassと動作用のclassは分けて書くようにしています。

理由は、1つのサイトで様々なスクロールアニメーションがある場合、都度JavaScriptを記述しないといけないからです。
発火用のclassと動作用のclassを分けておけば、フェードインやスクロールインなどのアニメーションが必要な場合も追加でJavaScriptを書く必要がありません。

今回のコードでは、発火用のclassは.js-scroll、動作用のclassは.-fadeinとしています。
大規模はサイトであったり、ページの追加や修正が多いサイトであるほど、こちらの方が便利です。

jQueryの読み込み、記述

次にjQueryを書いていきます。
その前にjQueryを読み込んでおきましょう。
jQueryのCDNは以下です。

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

公式サイトからもリンクが発行されていますので、こちらも確認してみて下さい。

あわせて読みたい

jQuery CDN Worldwide distribution of jQuery releases.

jQueryを読み込んだら、発火用のコードを記述していきます。
私は以下のコードを使用しています。

$(function () {
  // ウィンドウがスクロールされるたびに実行される関数
  $(window).scroll(function () {
    // ".js-scroll"というクラスを持つすべての要素に対して処理を行う
    $(".js-scroll").each(function () {
      // 対象となる要素のページの上からの位置を取得
      var targetOffset = $(this).offset().top;
      // ウィンドウの高さを取得
      var windowHeight = $(window).height();
      // 現在のスクロール位置 + ウィンドウの高さを計算
      var scrollPosition = $(window).scrollTop() + windowHeight;

      // 現在のスクロール位置が対象となる要素の位置を超えた場合
      if (scrollPosition > targetOffset) {
        // 要素に"js-active"というクラスを追加
        $(this).addClass("js-active");
      }
    });
  });
});

.js-scrollは今後増えていくことも考慮し、ページに1つであっても$(".js-scroll").each(function ()で記述するようにしています。

詳しい動作はそれぞれコメントアウトで書きましたが、.js-scrollが画面に入ったタイミングで.js-activeというclassを付与するようにしています。

jQueryで細かい動作を制御すると修正対応などが入った際に大変になるので、classの付与のみにしています。

CSSの記述

最後にCSSで具体的な動作を記述していきます。
今回は以下のようにしています。

.js-scroll.-fadein {
  opacity: 0;
  transform: translateY(5rem);
}
.js-scroll.-fadein.js-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

opacityで要素を透明にし、transformで位置を下にずらしています。
.js-activeのclassが付与された時にこれらを元に戻し、ふわっと表示される表現をしています。
速度はtransitionで調整しています。

transitionのメソッドですが、他の動作に影響が出ないよう.js-activeのclassが付与された時のみ適用されるようにしています。

これで、スクロールで要素が画面に入った時、ふわっと表示されるアニメーションを実装することができます。

表示バリエーションの紹介

スクロールに応じてアニメーションを表示する方法について解説してきました。
ここからは、表示方法のバリエーションを解説していきます。

バリエーションのストックがあれば、都度調べたりすることもなく、スラスラと実装することができます。

スライドイン

要素が下から表示されます。
transformのセレクタのみで簡単に実装できます。

.js-scroll.-slidein {
  transform: translateY(5rem);
}
.js-scroll.-slidein.js-active {
  transform: translateY(0);
  transition: transform 0.4s ease;
}

左右からスライドイン

要素が左右からスライドしながら表示されるエフェクトです。

.js-scroll.-slidein-left {
  transform: translateX(-5rem);
}
.js-scroll.-slidein-left.js-active {
  transform: translateY(0);
  transition: transform 0.4s ease;
}

.js-scroll.-slidein-right {
  transform: translateX(5rem);
}
.js-scroll.-slidein-right.js-active {
  transform: translateY(0);
  transition: transform 0.4s ease;
}

ズームイン

要素がズームインしながら表示されるエフェクトです。

.js-scroll.-zoomin {
  transform: scale(0.8);
  opacity: 0;
}
.js-scroll.-zoomin.js-active {
  transform: scale(1);
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

おわりに

スクロールアニメーションの実装方法
表示バリエーション

これらについて解説してきました。
実装にあたってのポイントは以下です。

JavaScriptはclassの付与のみ
具体的な動作はCSSで記述する
今後増えることを考慮し$(".js-scroll").each(function ()で記述

スクロールのアニメーションがあることで、よりおしゃれなサイトに魅せることができ、ユーザーの滞在時間が伸びる可能性もあります。

今回解説した記事で簡単に実装できますので、ぜひ実装してみて下さい。

URLをコピーしました！