要素が画面に入ると要素をフェードインで表示するJavaScriptのサンプル（jQuery）

ホーム
BLOG
フロントエンド
要素が画面に入ると要素をフェードインで表示するJavaS…

フロントエンド
2021.10.05

Webサイトのアニメーションで、スクロールしていると画面に要素が入ると透明な状態から、徐々に表示されるJavaScriptのサンプルです。
フェイドインさせる要素は画像に限らず、テキストなどにも使用可能です。

こちらのサンプルはHTML、CSS、jQuery（Ver1.10系）を使用しています。

Contents

サンプルの動作

実際に動作サンプルをご覧ください。

→スクロールフェイドイン　サンプル

サンプルにはシンプルに画像がフェードインするものを基本に、上下左右から画像がスライドして表示されるパターンが4種含まれています。

シンプルなフェイドイン
フェードイン＋スライドアップ
フェードイン＋スライドダウン
フェードイン＋右からスライド
フェードイン＋左からスライド

アニメーションが完了した後は表示された状態を保持します。
再度アニメーションを開始するにはブラウザをリロードしてください。

サンプルのCSS



.scroll_fadein{
  opacity: 0;
}

.fadein_animation_start{
  // キーフレームアニメーションを指定
  animation-name: fadein_animation;
  // アニメーションの開始時間の遅延
  animation-delay: 0.3s;
  // アニメーションの時間を指定
  animation-duration: 1s;
  //アニメーション再生後のスタイルを指定
  animation-fill-mode: both;
}

@keyframes fadein_animation{
  0% {
    opacity: 0;
  }
  100%{
    opacity: 1;
    transform: translate(0);
  }
}

.slideup{
  transform: translateY(50px);
}

.slidedown{
  transform: translateY(-50px);
}

.slideright{
  transform: translateX(50px);
}

.slideleft{
  transform: translateX(-50px);
}

CSSでは、要素の不透明度、キーフレームアニメーション、スライドして表示するための位置の設定をしています。

1〜3行目はフェイドインさせたい要素に指定するクラス「scroll_fadein」の初期設定です。
フェイドインする前に一度、要素の不透明度をゼロに設定し、透明な状態にしています。

5〜14行目はキーフレームアニメーションを実行するためのクラス「fadein_animation_start」を設定しています。
7行目「animation-name: fadein_animation;」では16〜24行目で設定しているキーフレームアニメーションを指定しています。
9行目「animation-delay: 0.3s;」はアニメーション開始までに少し時間を遅らせる設定をしています。画面に要素が入った時にすぐアニメーションが開始されると、タイミングが少し早くなってしまうためです。
11行目「animation-duration: 1s;」はアニメーションが開始されてから完了するまでの時間です。今回は1秒間でアニメーションを完了させます。
13行目「animation-fill-mode: both;」はアニメーション完了後の設定で、アニメーションをリピートしないようにしています。

16〜24行目はキーフレームアニメーションの設定です。
アニメーションの動作自体はシンプルなもので、不透明度をゼロから１にするものです。
「transform: translate(0);」では、スライドしてフェイドインさせる時のために、デフォルトの位置に戻すようにしています。
位置を戻す動作は、不透明度の変化の時には作動していても表示上は変わっているように見えません。
スライドの設定をした時のみ、変化が見えるようにしています。

26〜40行目はスライドアニメーションを追加する時に使用するクラスを定義しています。
単独で使用すると、位置が50pxズレます。
「scroll_fadein」と組み合わせで要素に指定することで、50pxズレた位置から、デフォルトの位置に戻すことでスライドアニメーションを付与します。

「シンプルなフェイドイン」サンプルのHTML



<img src="images/sample_02.jpg" alt="" class="scroll_fadein">

画像にフェイドインを設定するクラス「scroll_fadein」を設定しています。
今回の全てのサンプルにはこの「scroll_fadein」を使用しています。

フェイドイン＋スライド　サンプルのHTML



<img src="images/sample_03.jpg" alt="" class="slideup scroll_fadein">

シンプルなフェイドインのサンプルとの違いは、クラスに「slideup」を追加していることです。
今回のスライドアニメーションの時にはスライドさせる方向によって、フェイドインさせる要素に「scroll_fadein」と合わせて以下のクラスを追加します。

slideup・・・上から下へスライド
slidedown・・・下から上へスライド
slideright・・・右から左へスライド
slideleft・・・左から右へスライド

サンプルのJavaScriptソース



$(function () {
  $(window).scroll(function(){
    var windowHeight = $(window).height(),
    scrollY = $(window).scrollTop();

    $('.scroll_fadein').each(function(){
      var thisPosition = $(this).offset().top;
      if(scrollY > thisPosition - windowHeight){
        $(this).addClass('fadein_animation_start');
      }
    });
  });
});

2行目でブラウザのウィンドウのスクロールイベントを取得するために、「$(window).scroll()」でイベントを登録しています。

3、4行目に変数を定義しています。
ウィンドウ内がスクロールされる度に値が上書きされます。

windowHeight・・・ウィンドウの高さ
scrollY・・・ウィンドウが下方向にスクロールされた数値

6行目で「.scroll_fadein」クラスを指定された要素に対する設定をしています。
一つのページに複数の要素が配置されることを想定しているので、「each()」で動作を設定しています。

7行目は「.scroll_fadein」クラスを指定された各要素に個別に設定する変数「thisPosition」を定義しています。
この変数は先に定義した変数と組み合わせて、要素が画面に入ったかどうかを判断する時に使用します。

8行目では、要素ががウィンドウ内に入ったかどうかを判定する記述です。
条件文「if(scrollY > thisPosition – windowHeight)」の意味ですが、「scrollYの値が、thisPositionの値から windowHeightの値を差し引いた値よりも大きい時」という意味です。
こちらの条件に当てはまる時に、「scroll_fadein」クラスを指定した要素に、アニメーションを開始するためのクラス「fadein_animation_start」を付与します。