jQueryでフェードイン

2020/10/18

こんにちは、ゆんつです。

最近、いろんなWEBサイトを見ていると画面をスクロールさせていくとコンテンツがフワッとフェードインしてくるようなデザインをよく見かけます。

スクロールに応じてコンテンツが画面内にフェードインする仕掛けはjQueryのプラグインを使ってもできますが、自分でjQuery簡単なコードを書くことで実現することもできます。

今日は画面のスクロールに応じてコンテンツをフェードインさせる方法について書きたいと思います。

1 基本的な考え方
2 下からのフェードイン
3 横からのフェードイン
- 3.1 jQuery
4 斜めからのフェードイン
- 4.1 jQuery
5 仕組みが解れば簡単です

基本的な考え方

フェードをさせる基本的な方法は

jQueryでスクロールにイベントを仕込む
translateでフェードインしたい要素をずらしておいて、フェードインの対象となる要素がブラウザ内に入ってきたらtranslateを0にして元の位置に戻す
フェードインの速度はcssのtransitionで調整する

というものになります。

下からのフェードイン

それでは、実際にやってみましょう。

まずは下からのフェードインのデモです。

See the Pen fadein1 by konpure (@yuntu) on CodePen.

画面をスクロールしてもらうと、スクロールに応じてboxが下の方からフワッとフェードインしてくるはずです。

各コードは以下の通りです。

HTML

<div class="dummy">dummy</div><!-- /.dummy -->
<div class="box box1 fadein">box1</div><!-- /.box1 fadein -->
<div class="box box2 fadein">box2</div><!-- /.box1 fadein -->
<div class="box box3 fadein">box3</div><!-- /.box1 fadein -->
<div class="box box4 fadein">box4</div><!-- /.box1 fadein -->

フェードインさせたい要素には「fadein」というクラスをつけています。

このクラス名をjQueryで利用します。

CSS

.dummy {
  width: 100%;
  height: 400px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 75px;
  margin-bottom: 100px;
}

.box {
  width: 60%;
  height: 200px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 75px;
  font-weight: 700;
  
  /* フェードイン速度の調整 */
  transition: .7s ease-in-out ;
}

.box1 {
  background: blue;
}

.box2 {
  background: red;
}

.box3 {
  background: yellow;
}

.box4 {
  background: green;
}

transitionでフェードインの速度を調節しています。

「ease-in-out」にすることでフェードの最初と最後の速度が緩やかになるようにしています。

jQuery

$(function() {
  //画面をスクロールするとイベントが発動する
  $(window).scroll(function() {
    //フェードインさせたい要素の位置をずらす
    $('.fadein').css({
      'opacity': '0',
      'transform': 'translateX(30px)'
    });
    
    //スクロールバーの位置を取得
    var scroll = $(window).scrollTop();

    //ウィンドウの高さを取得
    var windowHeight = $(window).height();

    $('.fadein').each(function() {
      //フェードインさせたい要素の縦位置を取得
      var elemPos = $(this).offset().top;

      //要素がウィンドウの中に入ってからさらに100pxスクロールしたら要素をフェードインする
      if (scroll > elemPos - windowHeight + 100) {
        $(this).css({
          'opacity': '1',
          'transform': 'translateX(0)'
        });
      }
    });
  });
});

jQueryでスクロールにイベントを仕込んでいます。

画面がスクロールされたらフェードインさせたい要素をＹ軸方向（下方向）にずらします。

そしてスクローにより画面内にフェードインさせたい要素が入ってきたらＹ軸方向を0にして元の位置に戻るようにしています。

元の位置から下にずれた要素が、スクロールにより元の位置に戻ることでフェードインしたように見える仕掛けです。

さらにopacityも0から1に変化させることで、要素をジワっと表示させることができます。

scroll > elemPos - windowHeightが分かりにくいかもしれないので少し説明しておくと、要素の位置(elemPos)から画面の高さ（windowHeight）を引くと、その要素が画面内に入ってくるスクロールの位置が計算されます。

画面内にフェードインさせたい要素が入っていないのにフェードインをしても意味がありませんので、スクロールの位置が要素の本来の位置を超え、要素が表示できる状態になっていればtranslateを0にしてフェードインするようにしています。

elemPos - windowHeight + 100の「+100」というのはブレーキの遊びのようなもので、elemPos - windowHeightだと要素がほんの少しでも画面内に入るとフェードインしてしまいます。

要素が見切れたような状態でフェードインしても、あまりフェードインの効果がありません。

そこで、いくらか＋しておくことでその分スクロールが必要になり要素がしっかり画面内に入ってからフェードインするようになります。

横からのフェードイン

See the Pen fadein2 by konpure (@yuntu) on CodePen.

画面をスクロールすると右から左に各boxがフェードインするはずです。

HTMLとCSSは下からのフェードインと全く同じなので、jQueryのコードだけ書いておきます。

jQuery

$(function() {
  //画面をスクロールするとイベントが発動する
  $(window).scroll(function() {
    
    //フェードインさせたい要素の位置をずらす
    $('.fadein').css({
      'opacity': '0',
      'transform': 'translateX(30px)'
    });
    
    //スクロールバーの位置を取得
    var scroll = $(window).scrollTop();

    //ウィンドウの高さを取得
    var windowHeight = $(window).height();

    $('.fadein').each(function() {
      //フェードインさせたい要素の縦位置を取得
      var elemPos = $(this).offset().top;

      //要素がウィンドウの中に入ってからさらに100pxスクロールしたら要素をフェードインする
      if (scroll > elemPos - windowHeight + 100) {
        $(this).css({
          'opacity': '1',
          'transform': 'translateX(0)'
        });
      }
    });
  });
});

上から下へのフェードインから変更した部分は最初のtranslateで要素をずらす部分がX軸（横方向）になっただけです。

フェードインさせたい要素を横にずらし、その要素が画面内に入ってきたら元の位置に戻せば横からのフェードインになります。

斜めからのフェードイン

See the Pen fadein3 by konpure (@yuntu) on CodePen.

画面をスクロールすると右下から各boxがフェードインしてくるはずです。

HTMLとCSSは下からのフェードインと全く同じなので、jQueryのコードだけ書いておきます。

jQuery

$(function() {
  //画面をスクロールするとイベントが発動する
  $(window).scroll(function() {
    
    //フェードインさせたい要素の位置をずらす
    $('.fadein').css({
      'opacity': '0',
      'transform': 'translate(100px, 100px)'
    });
    
    //スクロールバーの位置を取得
    var scroll = $(window).scrollTop();

    //ウィンドウの高さを取得
    var windowHeight = $(window).height();

    $('.fadein').each(function() {
      //フェードインさせたい要素の縦位置を取得
      var elemPos = $(this).offset().top;

      //要素がウィンドウの中に入ってからさらに100pxスクロールしたら要素をフェードインする
      if (scroll > elemPos - windowHeight + 100) {
        $(this).css({
          'opacity': '1',
          'transform': 'translate(0, 0)'
        });
      }
    });
  });
});

変更したのは最初のtranslateで要素をずらす部分がX軸とY軸になっただけです。

X軸とY軸に数値を指定して0に戻すと斜めからのフェードインになります。