Into the Program

【jQuery】スクロールして画面内に入った要素をフェードインで表示する

Image

jQueryでスクロールして画面内に入った要素をフェードインで表示する方法のご紹介です。

フェードインのアニメーションで同じような処理を簡単に実装することができるAOSという有名プラグインを使用する方法もあります。複雑なアニメーションを実装したい場合は積極的にプラグインを使用しても良いかと思いますが、決まったパターンのフェードインアニメーションであればプラグインを使用する必要はないかと思いまして、今回スクリプトを作成しました。

本記事では、スクロールした際にフェードイン表示する一般的なパターンと、フェードイン表示する際に上から落ちてくるようなアニメーションを追加した2パターンのアニメーションをご紹介していきたいと思います。

  • フェードインアニメーション
  • 上から落ちてくる動きを追加したフェードインアニメーション

では、解説していきます。

フェードインアニメーション

通常のフェードインアニメーションのご紹介です。今回はfedeInというclassを持った要素がスクロール中に画面内に表示されるとフェードインアニメーションで表示されるようにしていきます。HTMLでfedeInというclassを持った要素を作成します。

HTML

<div class="box fadeIn">
  <-- ここにコンテンツ -->
</div>

本記事では割愛させていただきますが、boxというclassに要素自体のスタイルを定義しています。fadeInのclassにはCSSで下記のスタイルを定義します。

CSS

.fadeIn {
  transition: 1s;
  opacity: 0;
}

.fadeIn.animated {
  opacity: 1;
}

上記のCSSでは、fadeInのclassを持つ要素のopacityを0に定義しています。そのため初期状態でfadeInが設定されている要素を見ることはできません。fadeInという要素を見るためにはanimatedというclassを追加してopacityを1に更新する必要があります。

ただ、CSSは動的な処理に対応していないため、classを動的に追加する処理はjQueryを使用します。

jQueryでは、スクロール中にfadeInのclassを持つ要素が画面内に表示されたらanimatedというclassを追加するように処理を組み立てていきます。

下記はスクリプトのサンプルです。変更が必要な部分にコメントを入れておきますので、併せてご参照ください。

JS

$(window).on('load scroll', function (){

  var box = $('.fadeIn');
  var animated = 'animated';
  
  box.each(function(){
  
    var boxOffset = $(this).offset().top;
    var scrollPos = $(window).scrollTop();
    var wh = $(window).height();

    //画面内のどの位置で処理を実行するかで「100」の値を変更
    if(scrollPos > boxOffset - wh + 100 ){
      $(this).addClass(animated);
    }
  });

});

boxのスタイルによって見た目は異なりますが、ご紹介したコードをすべて記述すると下記のようなデモが完成します。スクロールして動きをご確認ください。

DEMO

See the Pen
Scroll FadeIn Animation1 | jQuery
by ryohei (@intotheprogram)
on CodePen.

デモをスクロールすると青色の背景を持つ要素がフェードインアニメーションで表示されるかと思います。

これだけでも素敵なアニメーションになっていますが、これに加えてフェードインで表示される際に要素が少し上から下に移動するようなアニメーションを追加してみたいと思います。

上から落ちてくる動きを追加したフェードインアニメーション

HTMLとjQueryのスクリプトは上記でご紹介したものを使用しますが、CSSだけ若干変更を加えます。

CSS

.fadeIn {
  transform: translate3d(0, -10px, 0);
  transition: 1s;
  opacity: 0;
}

.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

translateで初期状態を若干上の方向にずらしておき、animatedのclassが追加された場合に元に戻します。そうすることで下記のようなアニメーションを簡単に追加することができます。

DEMO

See the Pen
Scroll FadeIn Animation2 | jQuery
by ryohei (@intotheprogram)
on CodePen.

少し動きを加えるだけでも違った印象になりますね。

上記ではtranslate3dでアニメーションを実行していますが、scaleであったりrotateであったり色々と変更することで多くの種類のアニメーションを作ることができます。

最後に

いかがでしたでしょうか。

スクロールして何か処理を実行する、というのはサイト制作をする上で何度も実装することになる処理です。本記事でご紹介した内容がお役に立てれば幸いです。

以上、jQueryでスクロールして画面内に入った要素をフェードインで表示する方法のご紹介でした!

SHARE