jQuery アニメーション Web制作 コーディング

【jQueryプラグイン】inview.jsでスクロールして表示領域に入ったらフェードインさせる方法

スクロールして表示領域に入ったら要素をフェードインさせる事出来ない？
jQueryのプラグインを使えば簡単に出来るよ！

以前「スクロールに応じてアニメーションが発生するwow.jsの使い方」で同じような物をご紹介しましたが、実務でよく使うのは圧倒的に今回のinview.jsの方になります。

正確に言えばフェードインだけではなく、スクロールして表示領域に入ったらclassを付与して色んなイベントを発生させることが出来ます。

inview.jsをダウンロード

まずは今回使用するinview.jsを以下のページからダウンロードします。

inview.js

 

ダウンロードしたファイルを解凍したらjquery.inview.min.jsを取り出します。

 

 

使うファイルはこれだけでOKです。

※CDNを使う場合はjQuery1系を使わないと動かないようなので、今回はファイルを使う方法でいきます（codepenではCDNです）

そしてファイルを読み込むコードを書きます（htmlと同じ階層にjsフォルダがあり、その中にjquery.inview.min.jsがある場合）

<script src="js/jquery.inview.min.js"></script>

またjQueryのプラグインなので、jQuery本体を読み込むのも忘れないようにして下さい。

jQuery使うの初めてだよ～って人は以下の記事を参照下さい。

【初めて使う人向け】jQuery本体を読み込む方法

まずは下から上にフェードインさせたい場合を例に解説していきます。

 

htmlにclassを書く

まずhtml側でフェードインさせたい要素に分かりやすいclass名を付けます。

今回はjs-fadeUpとします。

<div class="container">
  <div class="box js-fadeUp">
    <img src="画像のパス" alt=""/>
  </div>
  <div class="box js-fadeUp">
    <img src="画像のパス" alt=""/>
  </div>
  <div class="box js-fadeUp">
    <img src="画像のパス" alt=""/>
  </div>
</div>

このjs-fadeUpというclassが付いている要素が表示領域に入った時、jQueryでフェードイン用のclass名を付けます。

 

CSS

cssはフェードイン前と後のコードを書きます。

/* フェードイン(初期値) */
.js-fadeUp {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(30px); /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}

今回はフェードインさせる際、下から上に上がってくるようにしています。

左右に動かしたい場合はtranslateYをtranslateXにすればOKです。

is-inviewというclass名はこの後のjQueryで付与します（このclass名は自由に決めてOK）

また表示領域に入ったと同時にフェードインが始まるとちょっと早いと思った場合は、transition-delayで開始のタイミングを遅らせる事が出来ます。

 

jQuery

最後にjQueryです。

まずはコードを見てみましょう。

// スクロールして表示領域に入ったらclass付与
$(function () {
  $(".js-fadeUp").on("inview", function () {
    $(this).addClass("is-inview");
  });
});

ここでは

  1. js-fadeUpというclassを持つ要素が表示領域に入ったら
  2. その要素に対してis-inviewというclass名を付与する

という意味になります。

なので今回は「スクロールして表示領域に入ったらclassを付与する」という事をしているだけなので、フェードイン以外にも色々と応用が効きます。

例えばスクロールして表示領域に入ったらフォントの色を変えるという事も可能です。

 

DEMO

それでは最後に画像のフェードインとフォントの色が変わるサンプルを見てみましょう。

スクロールしていくと画像のフェードインが3種類（下から上、左から右、右から左）と、最後にフォントの色が変わりながら大きくなります（フォントはあまり使う機会はないと思いますが）

※先ほどのコードに追記しているので、コードは以下のタブを切り替えてご覧ください。

See the Pen
inview.js by junpei (@junpei-sugiyama)
on CodePen.

これは実務でもかなり高確率で使うので、ぜひ覚えておきましょう。

-jQuery, アニメーション, Web制作, コーディング