Web制作 jQuery

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

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

以前『wow.jsの使い方』で同じような物をご紹介しましたが、実務でよく使うのは圧倒的に『inview.js』の方になります。

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

今回は画像とサンプルを使って『inview.js』の使い方を解説していきます。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


スクロールして表示領域に入ったらフェードイン出来る『inview.js』の使い方

『inview.js』の使い方は以下になります。

  1. 『inview.js』をダウンロードしてファイルを読み込む
  2. HTMLにclassを書く
  3. CSSでフェードイン前後のコードを書く
  4. jQueryで表示領域に入ったらclassを付与させる

それでは順番に見ていきますが、まずはjQueryを使用するのでjQuery本体を読み込みましょう。

jQueryを使ったことがない人はこちらの記事を参照下さい。

参考記事
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

続きを見る

 

『inview.js』をダウンロード

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

inview.js

inview.jsダウンロード

inview.jsダウンロード

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

inview.jsファイル一覧

inview.jsファイル一覧

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

注意ポイント

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

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

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

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

 

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で表示領域に入ったらclassを付与する

最後にjQueryです。

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

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

これはこのような意味になります。

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

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

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

 

スクロールしてフェードインとフォントの色を変えてみる

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

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

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

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

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

以上になります。

あわせて読む
Animate.cssをスクロールに応じてアニメーションできる『wow.js』の使い方【サンプルで解説】
Animate.cssをスクロールに応じてアニメーションできる『wow.js』の使い方【サンプルで解説】

続きを見る

あわせて読む
【jQuery】スクロールして要素が画面内に入ったらフェードインさせる方法
【jQuery】スクロールして要素が画面内に入ったらフェードインさせる方法

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, jQuery
-