【jQuery】スクロールするとふわっと表示！フェードインアニメーションを実装しよう

下からや横からふわっと要素が現れるのって、どうやるんですか？

spica

jQueryとCSSで簡単に実装できますよ！

まずはスムーススクロールやページトップボタンをおさらいしておきましょう。

【jQuery】ぬるっとスクロールさせたい！スムーススクロールの実装

【jQuery】ぬるっとスクロールさせたい！動きのあるウェブページにかかせない、スムーススクロールを実装しよう。

spicaweblog.com

2022.04.17

【jQuery】もはや常識？！ページトップボタンを実装しよう！

【jQuery】よく見かける「ページトップボタン」。ボタンの作り方からjQueryのコードの詳細まで徹底解説します。

spicaweblog.com

2022.04.18

スクロールで使ったjQueryのおさらい

スムーススクロールやページトップボタンで出てきたjQueryの構文で、今回使うものを確認しておきましょう。

offset().top

コンテンツの縦位置(座標)を取得します。

scrollTop()

スクロールした距離を取得します。

下から要素がふわっとフェードイン

スクロールをすると、ある位置に来た時に下から要素がふわっと現れる動きを実装してみましょう。

See the Pen jQuery fadeUp by spica (@spica_blog) on CodePen.

HTMLを記述

同じスタイルの要素を複数フェードインする場合、アイテムそれぞれに任意のクラス名を付けます。（ここでは「.fadeUpTrigger」です。）

<ul>
    <li class="fadeUpTrigger itemBox">ふわっと表示</li>
    <li class="fadeUpTrigger itemBox">ふわっと表示</li>
    <li class="fadeUpTrigger itemBox">ふわっと表示</li>
</ul>

親要素に「.fadeUpTrigger」を付けると、個別にアニメーションが効かなくなってしまいますので気を付けましょう。

CSSを記述

CSSでは、アニメーションの設定をします。

アニメーションやtransformプロパティはベンダープレフィックスを付ける必要があります。

/* 下からふわっと現れる */

/* jQueryで追加、削除 */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime; /*アニメーションの名前*/
  -webkit-animation-duration: 1s;
          animation-duration: 1s; /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; /*アニメーション後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeUpAnime {
  0% {
    opacity: 0; /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1; /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0); /*元の位置*/
  }
}
@keyframes fadeUpAnime {
  0% {
    opacity: 0; /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1; /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0); /*元の位置*/
  }
}
.fadeUpTrigger {
  opacity: 0; /*非表示*/
}

「.fadeUp」というクラス名は、jQueryで追加・削除されるクラス名です。

.fadeUpが追加されると、「fadeUpAnime」というアニメーションが実行されます。

アニメーションの実行時間は1秒で、アニメーションが終わっても要素が表示された状態に設定します。

下から上に向かって移動するようにしたいので、最初に要素が100px下に設定します。

0%「transform: translateY(100px);」 → 100%「transform: translateY(0);」

要素が徐々に現れるようにしたいので、「.fadeUpTrigger」を「opacity: 0;」で非表示にしておきます。

【HTML/CSS】CSSだけでできる！animationプロパティで動きのあるサイトにしよう

【HTML/CSS】CSSだけでできる！animationプロパティと@keyframesで動きのあるサイトにしよう

spicaweblog.com

2022.05.09

jQueryを記述

スクロールすると要素が現れるので、スクロールイベント「$(window).scroll(function(){});」を設定します。

$(function() {
// スクロールイベント
  $(window).scroll(function() {
    // フェードアニメーションを呼び出す
    fadeAnime();
  });
  
  // フェードアニメーションの設定
  function fadeAnime() {
    // .fadeUpTriggerが付いた要素に対して
    $('.fadeUpTrigger').each(function() {
      // 縦位置を取得し-50pxして、変数targetに代入する
      let target = $(this).offset().top -= 50;
      // スクロール量を取得し、変数scrollに代入する
      let scroll = $(window).scrollTop();
      // 表示画面の高さを取得し、変数windowHeightに代入する
      let windowHeight = $(window).height();

      // 要素の縦位置から表示画面の高さ+200pxを引いた数字よりscrollのほうが大きい場合
      if(scroll > target - windowHeight + 200) {
        // .fadeUpを追加する
        $(this).addClass('fadeUp');
      } else {
        // そうでない場合は.fadeUpを削除する
        $(this).removeClass('fadeUp');
      }
    });
  };    
});

実行予約$(function(){})

{}の中に処理を書いていきます。

スムーススクロールなどの他のjQueryを作成している場合、同じ$(function(){})内に記述することができます。

【イベント】scroll

「$(window).scroll(function(){})」の｛｝内にコードを記述します。

ここでは「fadeAnime();」として、関数を呼び出しています。

関数の定義

「function fadeAnime(){}」という関数を作成しました。

スクロールするとfadeAnime()関数が実行されます。

each()

eachメソッドは、指定したすべての要素に対して関数を実行する場合に使います。

$('.fadeUpTrigger').each(function() {
  // 処理を書く
}

「.fadeUpTrigger」が付与された要素に対しての処理を記述します。

変数を宣言する

// 縦位置を取得し-50pxして、変数targetに代入する
let target = $(this).offset().top -= 50;
// スクロール量を取得し、変数scrollに代入する
let scroll = $(window).scrollTop();
// 表示画面の高さを取得し、変数windowHeightに代入する
let windowHeight = $(window).height();

「.fadeUpTrigger」が付与された要素の縦位置（座標）と、スクロールされた高さ、表示画面の高さをそれぞれ取得します。

スクロール量に応じてクラス名を付け外しする

// 要素の縦位置から表示画面の高さを引いて200pxを足した数字よりscrollのほうが大きい場合
if(scroll > target - windowHeight + 200) {
    // .fadeUpを追加する
    $(this).addClass('fadeUp');
} else {
    // そうでない場合は.fadeUpを削除する
    $(this).removeClass('fadeUp');
}

スクロール量が、「要素の高さ　－　表示画面の高さ　+　200px」より大きかったら、要素に「.fadeUp」というクラス名が追加されます。

スクロール量が、「要素の高さ　－　表示画面の高さ　+　200px」以下の場合、要素から「.fadeUp」が削除されます。

jQuery標準デザイン講座

¥2,455 （2022/04/23 15:52時点 | Amazon調べ）

Amazonで見る

楽天市場で見る

Yahooショッピングで見る

ポチップ

横から要素がふわっとスライド

See the Pen jQuery slideUp by spica (@spica_blog) on CodePen.

HTMLを記述

同じスタイルの要素を複数フェードインする場合、アイテムそれぞれに任意のクラス名を付けます。（ここでは右から現れる要素に「.fadeInRightTrigger」、左から現れる要素に「.fadeInLeftTrigger」と付けました。）

<ul>
    <li class="fadeInRightTrigger itemBox">右からふわっと表示</li>
    <li class="fadeInLeftTrigger itemBox">左からふわっと表示</li>
</ul>

CSSを記述

CSSでアニメーションの設定をします。

/* 右からふわっと現れる */
/* jQueryで追加・削除 */
.fadeInRight {
  -webkit-animation-name: fadeInRightAnime;
          animation-name: fadeInRightAnime; /*アニメーションの名前*/
  -webkit-animation-duration: 1s;
          animation-duration: 1s; /*アニメーションの時間を1秒に設定*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; /*アニメーション実行後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeInRightAnime {
  0% {
    opacity: 0; /*非表示*/
    -webkit-transform: translateX(100px);
            transform: translateX(100px); /*100px分横にずれる*/
  }
  100% {
    opacity: 1; /*表示*/
    -webkit-transform: translateX(0);
            transform: translateX(0); /*元の位置*/
  }
}
@keyframes fadeInRightAnime {
  0% {
    opacity: 0; /*非表示*/
    -webkit-transform: translateX(100px);
            transform: translateX(100px); /*100px分横にずれる*/
  }
  100% {
    opacity: 1; /*表示*/
    -webkit-transform: translateX(0);
            transform: translateX(0); /*元の位置*/
  }
}
.fadeInRightTrigger {
  opacity: 0; /*非表示*/
}

/* 左からふわっと現れる */
/* jQueryで追加・削除 */
.fadeInLeft {
  -webkit-animation-name: fadeInLeftAnime;
          animation-name: fadeInLeftAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInLeftAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px); 
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes fadeInLeftAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px); 
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.fadeInLeftTrigger {
  opacity: 0;
}

アニメーションの設定は「下から要素がふわっとフェードイン」とほぼ同じです。

今回は一方向だけでなく左右両方向からの動きになるので、アニメーションは2つ（.fadeInRight、.fadeInLeft）設定します。

transformは、横方向からの移動になるので「translateX()」になります。

右からの場合は「translateX(100px)」、左からの場合は「translateX(-100px)」を0％時に指定します。

jQueryを記述

スクロールイベントを設定します。

$(function() {
  // スクロールイベント
  $(window).scroll(function() {
    // ふわっとスライドを呼び出す
    fadeInRightAnime();
    fadeInLeftAnime();
  });

  // 右からふわっとスライドの処理
  function fadeInRightAnime() {
    $('.fadeInRightTrigger').each(function() {
      // 発火する位置の座標から-50pxし、変数targetに代入する
      let target = $(this).offset().top -= 50;
      // スクロール量を取得し、変数scrollに代入する
      let scroll = $(window).scrollTop();
      // 表示画面の高さを取得し、変数windowHeightに代入する
      let windowHeight = $(window).height();
      // もし、発火する位置から表示画面の高さ+100pxを引いた数値よりscrollの高さが大きかったら
      if(scroll > target - windowHeight + 100) {
        // .fadeInRightを追加する
        $(this).addClass('fadeInRight');
      } else {
        // .fadeInRightを削除する
        $(this).removeClass('fadeInRight');
      }
    });
  };

  // 左からふわっとスライドの処理
  function fadeInLeftAnime() {
    $('.fadeInLeftTrigger').each(function() {
      let target = $(this).offset().top -= 50;
      let scroll = $(window).scrollTop();
      let windowHeight = $(window).height();
      if(scroll > target - windowHeight + 100) {
        $(this).addClass('fadeInLeft');
      } else {
        $(this).removeClass('fadeInLeft');
      }
    });
  }; 
});

jQueryの記述も、「下から要素がふわっとフェードイン」とほぼ同じになります。

左右それぞれに関数を作成し、スクロールイベント内で両方呼び出します。

要素に画像を指定したり、アニメーション時間やtransformの値を変更して、いろいろと試してみてください。

See the Pen jQuery img fadein by spica (@spica_blog) on CodePen.

まとめ

スクロールすると、要素がふわっと現れるフェードインの方法をご紹介しました。

動きがあるのっておもしろいですね！

spica

いろんな場面で使えるテクニックですので、ぜひ覚えておきましょう！

inviewなどのプラグインを使う方法もありますよ。

企業サイトや美術館の特設サイトでもよく使われているフェードイン。

もっとも簡単に使うには、jQueryのメソッド「fadeIn()」もあります。

様々な方法を試してみて、自分が表現したいフェードインのやり方を見つけてくださいね！