jQueryでスクロール時のふわっとアニメーションをposition: absoluteの要素に適用する方法

JavaScript

jQueryを使用して、スクロールに応じて要素をふわっと表示させるアニメーションを実装することは、Webデザインでよく使われる技術です。しかし、position: absoluteを適用している要素に対して、スクロール時のアニメーションが適用されないことがあります。この記事では、その原因と解決方法を解説します。

スクロールで要素をふわっと表示させるjQueryの基本

スクロール時に要素がふわっと表示されるアニメーションは、jQueryを使って簡単に実装できます。以下のようなコードを使うことで、スクロール時に指定した要素にクラスを追加し、そのクラスでCSSアニメーションを制御することが可能です。

$(function () {
  var $bottom = $('.bottom');
  var $win = $(window);
  $win.on('load scroll', function () {
    var hSize = window.innerHeight;
    var scroll = $win.scrollTop();
    $bottom.each(function () {
      if (scroll > $(this).offset().top - hSize + 50) {
        $(this).addClass('active');
      }
    });
  });
});

このコードは、スクロールした位置に応じて、クラス「active」を要素に追加し、CSSでそのスタイル(例えば、ふわっと表示されるアニメーション)を制御します。しかし、position: absoluteが指定された要素では、うまくアニメーションが動作しない場合があります。

position: absoluteが影響する理由

position: absoluteは、要素を親要素に対して相対的に配置するため、画面上での位置が固定されます。そのため、スクロールイベントをトリガーにして、アニメーションを発動させても、親要素との位置関係が複雑になり、期待通りに動作しないことがあります。

スクロールイベントによるアニメーションを適切に適用するためには、絶対位置指定の要素に対しても、適切なスタイルや処理を追加する必要があります。

解決策:CSSの調整とjQueryの修正

position: absoluteが適用された要素にスクロールアニメーションを正常に動作させるためには、CSSとjQueryの両方で少し調整が必要です。まず、CSSで絶対位置の要素が正しく表示されるように、transformプロパティを使用してアニメーションを制御する方法を試しましょう。

以下のように、要素がスクロールして表示される際に、transformを使って位置を変更することで、アニメーションを適用します。

.bottom {
  position: absolute;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.bottom.active {
  opacity: 1;
  transform: translateY(0);
}

これで、position: absoluteが指定された要素にもスクロール時のふわっとアニメーションを適用できるようになります。

jQueryの修正:イベントリスナーと要素の位置調整

次に、jQueryのコードを少し修正して、スクロールイベントが発火したときに適切な位置調整を行い、アニメーションが動作するようにします。具体的には、スクロール位置に応じて要素の位置を調整する処理を追加します。

$(function () {
  var $bottom = $('.bottom');
  var $win = $(window);
  $win.on('load scroll', function () {
    var hSize = window.innerHeight;
    var scroll = $win.scrollTop();
    $bottom.each(function () {
      if (scroll > $(this).offset().top - hSize + 50) {
        $(this).addClass('active');
      }
    });
  });
});

これで、position: absoluteが指定された要素でも、スクロールに応じてスムーズにふわっと表示されるようになります。

まとめ

position: absoluteが適用された要素に対して、スクロール時のふわっとアニメーションを適用するためには、CSSでtransformを使ってアニメーションを制御し、jQueryでスクロール位置に応じたクラス追加処理を行う必要があります。これらの調整を行うことで、絶対位置指定された要素にもスムーズなスクロールアニメーションを実装することができます。

コメント

タイトルとURLをコピーしました