【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
- 2020.4.17
- jQuery

jQueryの遅延(少し遅らせて表示させる、最近よく見かけるあれです)プラグイン『inview.js』の使い方と、制作に役立つ実装サンプルをまとめました。
CSSのアニメーションと組み合わせることでサイト制作の幅がとっても広がります。
慣れてしまえば簡単なので是非取り入れてみてください。


もくじ(実装サンプル)
1.【サンプル】フェードイン(ふわっと)
スクロールすると、ふわーっと。
動き(アニメーション)がわかりやすいようにスタイル(CSS)を付けています。
See the Pen
【jQuery】『inview.js』フェードイン(ふわっと) by 125naroom (@125naroom)
on CodePen.
HTML
<div class="section"> <div class="imgBox inview fadeIn"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview fadeIn"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview fadeIn"> <p>ふわっと</p> </div> </div>
CSS
.fadeIn { opacity: 0; transition: 2s; } .fadeIn.is-show { opacity: 1; }
jQuery
$(function(){ $(".inview").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } }); });
2.【サンプル】下からフェードイン(ふわっと)
スクロールすると、ふわーっと。
動き(アニメーション)がわかりやすいようにスタイル(CSS)を付けています。
See the Pen
【jQuery】『inview.js』下からフェードイン(ふわっと) by 125naroom (@125naroom)
on CodePen.
HTML
<div class="section"> <div class="imgBox inview fadeIn_up"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview fadeIn_up"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview fadeIn_up"> <p>ふわっと</p> </div> </div>
CSS
.fadeIn_up { opacity: 0; transform: translate(0, 50%); transition: 2s; } .fadeIn_up.is-show { transform: translate(0, 0); opacity: 1; }
jQuery
$(function(){ $(".inview").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } }); });
3.【サンプル】左からフェードイン(ふわっと)
スクロールすると、ふわーっと。
動き(アニメーション)がわかりやすいようにスタイル(CSS)を付けています。
See the Pen
【jQuery】『inview.js』左からフェードイン(ふわっと) by 125naroom (@125naroom)
on CodePen.
HTML
<div class="section"> <div class="imgBox inview fadeIn_left"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview fadeIn_left"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview fadeIn_left"> <p>ふわっと</p> </div> </div>
CSS
.fadeIn_left { opacity: 0; transform: translate(-50%, 0); transition: 2s; } .fadeIn_left.is-show { transform: translate(0, 0); opacity: 1; }
jQuery
$(function(){ $(".inview").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } }); });
4.【サンプル】右からフェードイン(ふわっと)
スクロールすると、ふわーっと。
動き(アニメーション)がわかりやすいようにスタイル(CSS)を付けています。
See the Pen
【jQuery】『inview.js』右からフェードイン(ふわっと) by 125naroom (@125naroom)
on CodePen.
HTML
<div class="section"> <div class="imgBox inview fadeIn_right"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview fadeIn_right"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview fadeIn_right"> <p>ふわっと</p> </div> </div>
CSS
.fadeIn_right { opacity: 0; transform: translate(50%, 0); transition: 2s; } .fadeIn_right.is-show { transform: translate(0, 0); opacity: 1; }
jQuery
$(function(){ $(".inview").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } }); });
5.【サンプル】フェードイン(ふわっと、繰り返す)
スクロールすると、ふわーっと。
動き(アニメーション)がわかりやすいようにスタイル(CSS)を付けています。
See the Pen
【jQuery】『inview.js』フェードイン(ふわっと、繰り返す) by 125naroom (@125naroom)
on CodePen.
HTML
<div class="section"> <div class="imgBox inview_re fadeIn"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview_re fadeIn"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview_re fadeIn"> <p>ふわっと</p> </div> </div>
CSS
.fadeIn { opacity: 0; transition: 2s; } .fadeIn.is-show { opacity: 1; }
jQuery
$(function(){ $(".inview_re").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } else { $(this).stop().removeClass("is-show"); } }); });
6.【サンプル】下からフェードイン(ふわっと、繰り返す)
スクロールすると、ふわーっと。
動き(アニメーション)がわかりやすいようにスタイル(CSS)を付けています。
See the Pen
【jQuery】『inview.js』下からフェードイン(ふわっと) by 125naroom (@125naroom)
on CodePen.
HTML
<div class="section"> <div class="imgBox inview_re fadeIn_up"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview_re fadeIn_up"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview_re fadeIn_up"> <p>ふわっと</p> </div> </div>
CSS
.fadeIn { opacity: 0; transition: 2s; } .fadeIn.is-show { opacity: 1; }
jQuery
$(function(){ $(".inview_re").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } else { $(this).stop().removeClass("is-show"); } }); });
7.【サンプル】左からフェードイン(ふわっと、繰り返す)
スクロールすると、ふわーっと。
動き(アニメーション)がわかりやすいようにスタイル(CSS)を付けています。
See the Pen
【jQuery】『inview.js』左からフェードイン(ふわっと、繰り返す) by 125naroom (@125naroom)
on CodePen.
HTML
<div class="section"> <div class="imgBox inview_re fadeIn_left"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview_re fadeIn_left"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview_re fadeIn_left"> <p>ふわっと</p> </div> </div>
CSS
.fadeIn_left { opacity: 0; transform: translate(-50%, 0); transition: 2s; } .fadeIn_left.is-show { transform: translate(0, 0); opacity: 1; }
jQuery
$(function(){ $(".inview_re").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } else { $(this).stop().removeClass("is-show"); } }); });
8.【サンプル】右からフェードイン(ふわっと、繰り返す)
スクロールすると、ふわーっと。
動き(アニメーション)がわかりやすいようにスタイル(CSS)を付けています。
See the Pen
【jQuery】『inview.js』右からフェードイン(ふわっと、繰り返す) by 125naroom (@125naroom)
on CodePen.
HTML
<div class="section"> <div class="imgBox inview_re fadeIn_right"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview_re fadeIn_right"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview_re fadeIn_right"> <p>ふわっと</p> </div> </div>
CSS
.fadeIn_right { opacity: 0; transform: translate(50%, 0); transition: 2s; } .fadeIn_right.is-show { transform: translate(0, 0); opacity: 1; }
jQuery
$(function(){ $(".inview_re").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } else { $(this).stop().removeClass("is-show"); } }); });
『inview.js』のダウンロード
まずは『inview.js』に必要なファイルを下記サイトからダウンロードします。
GitHub – protonet/jquery.inview
『inview.js』の使い方
ダウンロードファイルの中で必要なファイルは以下の1点です。
- jquery.inview.min.js
※『min』のついてないファイルでもオッケーです。『min』が付いているファイルは改行などがない容量軽減版になります。
HTML
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.inview.min.js"></script>
CDNを使う場合は、
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
1回だけの場合(参考)
『.inview』要素が表示されると、『.is-show』が追加(addClass)される。
$(function(){ $(".inview").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } }); });
繰り返す場合(参考)
『.inview_re』要素が表示されると、『.is-show』が追加(addClass)される。
『.inview_re』要素が見えなくなると、『.is-show』が削除(removeClass)される。
$(function(){ $(".inview_re").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } else { $(this).stop().removeClass("is-show"); } }); });
HTML(参考)
<div class="imgBox inview fadeIn"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div>
CSS(参考)
.fadeIn { opacity: 0; transition: 2s; } .fadeIn.is-show { opacity: 1; }
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに


関連記事
おすすめ
かんれん
- web / 2019.4.18
- 【CSS】css-doodle を使って雨を降らせてみる
- web / 2019.9.26
- 【CSS】input、textareaのCSSを初期化する(iOS対策)
- web / 2021.8.20
- 【CSS】打ち消し線(delタグ)をカスタマイズする
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.06.05New
- NEWTOWN/グラフィック・Webデザイン
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.04.25
- 【CSS】見出しデザインをまとめてみる(左右に線を引くとか)
- 見出しのデザインをまとめてくださーい わ、わかりましたー もくじ 左右に線を引く 左…
- 125naroom / デザインするところ(会社)です。