【jQuery】スクロールするとフェードインで表示されるアニメーションの作り方

こんにちは、Ryohei（@ityryohei）です！

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

フェードインのアニメーションと言えば、「AOS」という超有名プラグインがあります。「AOS」を読み込んで「class」と「data-*」を付与すれば簡単にフェードインアニメーションを実装することができます。パラメータも豊富で設定次第で多種多様なアニメーションを実装することが可能となっています。（詳しくはプラグインの公式サイトをご参照ください。）

複雑なアニメーションを実装したい場合、積極的にプラグインを使用しても良いかと思います。ただ、決まったパターンのフェードインアニメーションであれば、プラグインに頼るまでもないかな、と思いまして今回スクリプトを自作してみました。

今回作成したフェードインアニメーションは下記の2種類です。

スクロールすると要素がフェードインで表示されるアニメーション
スクロールすると要素が上から降りてくるような動きを追加したフェードインアニメーション

どちらもスクロールして表示されることが前提のアニメーションとなりますが、それぞれの実装方法を詳しくご紹介していきたいと思います。

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

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

最初に通常のフェードインアニメーションからご紹介していきます。

本記事では、「fedeIn」というclass属性を持った要素をアニメーションの対象とします。「fedeIn」の要素がスクロール中に可視範囲に表示されると、フェードインアニメーションが実行される、といった形になります。

とりあえず、HTMLで「fedeIn」というclass属性を持った要素を作成しておきましょう。

HTML

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

※本記事では割愛させていただきますが、デモでは「box」というclass属性を持つ要素に別途スタイルを定義しています。

「fedeIn」のclassには、下記のスタイルを定義しておきます。一般的なフェードインでも使用する「transition」と「opacity」のプロパティになります。

CSS

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

.fadeIn.animated {
  opacity: 1;
}

上記のスタイルを追加して、ページを再読み込みしてみましょう。「fedeIn」要素はページに表示されていないかと思います。

なぜかというと「fedeIn」にデフォルトで「opacity: 0;」を定義しているからです。「opacity」は要素の透明度を設定するプロパティになります。その値が「0」となっているため、読み込み時に「fadeIn」のclassを持つ要素はページに表示されていない状態となっています。

「fedeIn」要素を表示させるには「animated」というclassを追加し、「opacity」の値を「1」に上書きしてあげる必要があります。

その処理をスクロールで実行するわけですが……。

ご存知の通り、CSSは動的な処理に対応していないため、スクロールして「class」を動的に追加するぞ！　という処理は実現できません。なので、ここではjQueryを使用して動的な処理を実行することにします。

jQueryで実行するのは、スクロール中に「fedeIn」の要素が可視範囲に表示されたら「animated」を追加する、という処理です。

下記はその一連の処理をまとめたスクリプトのサンプルになります。変更が必要な箇所にコメントを入れていますので、処理を追いながら併せてご参照いただければと思います。

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.

ページをスクロールすると「fedeIn」を持つ要素がフェードインアニメーションで表示されるかと思います。スクロールすると実行されるアニメーションは見ていて気持ちが良いですよね。

これだけでも十分素敵なアニメーションになっているわけですが、これに加えてもう一つ別の動きを追加してみたいと思います。フェードインで表示される際に要素が上から下に降りてくるようなアニメーションを追加してみましょう。

上から降りてくるような動きを追加したフェードインアニメーション

HTMLとjQueryのスクリプトは、前項でご紹介したものを使用しますので、本項では割愛させていただきます。変更を加えるのはCSS部分になります。

下記が変更後のスタイルです。「transform」プロパティが追加となります。

CSS

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

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

「translate3d」で「fadeIn」の初期位置を上にずらしておき「animated」のclassが追加されると元の位置に戻ります。そうすることで下記のようなアニメーションを簡単に追加することができます。