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

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

ふわーっと
そうですそうです、ふわーっと、ですー

【サンプル】フェードイン（ふわっと）

スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。

コードを見る（HTML・CSS・jQuery）

HTML

<div class="section">
  <div class="imgBox inview fadeIn">
    <img src="https://125naroom.com/demo/common/img/slide01.svg" alt="">
  </div>
  <div class="imgBox inview fadeIn">
    <img src="https://125naroom.com/demo/common/img/slide03.svg" alt="">
  </div>
  <div class="txtBox inview fadeIn">
    <p>ふわっと</p>
  </div>
</div>

CSS

/* ===== 見本の箱（動きが分かりやすいように付けた見た目。なくても動きます） ===== */
.section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}
.imgBox img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.txtBox p {
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid #e8e3d8;
  border-bottom: 1px solid #e8e3d8;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

/* ===== フェードイン（ふわっと） ===== */
.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}

/* 動きを減らす設定のとき（動かさずに表示） */
@media (prefers-reduced-motion: reduce) {
  .fadeIn { transition: none; }
}

jQuery

$(function () {
  $(".inview").on("inview", function (event, isInView) {
    if (isInView) {
      $(this).stop().addClass("is-show");
    }
  });
});
見本ページをひらく（フェードイン・ふわっと）

【サンプル】下からフェードイン（ふわっと）

スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。

コードを見る（HTML・CSS・jQuery）

HTML

<div class="section">
  <div class="imgBox inview fadeIn_up">
    <img src="https://125naroom.com/demo/common/img/slide01.svg" alt="">
  </div>
  <div class="imgBox inview fadeIn_up">
    <img src="https://125naroom.com/demo/common/img/slide03.svg" alt="">
  </div>
  <div class="txtBox inview fadeIn_up">
    <p>ふわっと</p>
  </div>
</div>

CSS

/* ===== 見本の箱（動きが分かりやすいように付けた見た目。なくても動きます） ===== */
.section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}
.imgBox img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.txtBox p {
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid #e8e3d8;
  border-bottom: 1px solid #e8e3d8;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

/* ===== 下からフェードイン（ふわっと） ===== */
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* 動きを減らす設定のとき（動かさずに表示） */
@media (prefers-reduced-motion: reduce) {
  .fadeIn_up { transition: none; }
}

jQuery

$(function () {
  $(".inview").on("inview", function (event, isInView) {
    if (isInView) {
      $(this).stop().addClass("is-show");
    }
  });
});
見本ページをひらく（下からフェードイン・ふわっと）

【サンプル】左からフェードイン（ふわっと）

スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。

コードを見る（HTML・CSS・jQuery）

HTML

<div class="section">
  <div class="imgBox inview fadeIn_left">
    <img src="https://125naroom.com/demo/common/img/slide01.svg" alt="">
  </div>
  <div class="imgBox inview fadeIn_left">
    <img src="https://125naroom.com/demo/common/img/slide03.svg" alt="">
  </div>
  <div class="txtBox inview fadeIn_left">
    <p>ふわっと</p>
  </div>
</div>

CSS

/* ===== 見本の箱（動きが分かりやすいように付けた見た目。なくても動きます） ===== */
.section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}
.imgBox img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.txtBox p {
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid #e8e3d8;
  border-bottom: 1px solid #e8e3d8;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

/* ===== 左からフェードイン（ふわっと） ===== */
.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
body {
  overflow-x: hidden; /* 横からのときは、はみ出しを隠す */
}

/* 動きを減らす設定のとき（動かさずに表示） */
@media (prefers-reduced-motion: reduce) {
  .fadeIn_left { transition: none; }
}

jQuery

$(function () {
  $(".inview").on("inview", function (event, isInView) {
    if (isInView) {
      $(this).stop().addClass("is-show");
    }
  });
});
見本ページをひらく（左からフェードイン・ふわっと）

【サンプル】右からフェードイン（ふわっと）

スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。

コードを見る（HTML・CSS・jQuery）

HTML

<div class="section">
  <div class="imgBox inview fadeIn_right">
    <img src="https://125naroom.com/demo/common/img/slide01.svg" alt="">
  </div>
  <div class="imgBox inview fadeIn_right">
    <img src="https://125naroom.com/demo/common/img/slide03.svg" alt="">
  </div>
  <div class="txtBox inview fadeIn_right">
    <p>ふわっと</p>
  </div>
</div>

CSS

/* ===== 見本の箱（動きが分かりやすいように付けた見た目。なくても動きます） ===== */
.section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}
.imgBox img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.txtBox p {
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid #e8e3d8;
  border-bottom: 1px solid #e8e3d8;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

/* ===== 右からフェードイン（ふわっと） ===== */
.fadeIn_right {
  opacity: 0;
  transform: translate(50%, 0);
  transition: 2s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
body {
  overflow-x: hidden; /* 横からのときは、はみ出しを隠す */
}

/* 動きを減らす設定のとき（動かさずに表示） */
@media (prefers-reduced-motion: reduce) {
  .fadeIn_right { transition: none; }
}

jQuery

$(function () {
  $(".inview").on("inview", function (event, isInView) {
    if (isInView) {
      $(this).stop().addClass("is-show");
    }
  });
});
見本ページをひらく（右からフェードイン・ふわっと）

【サンプル】フェードイン（ふわっと、繰り返す）

スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。

コードを見る（HTML・CSS・jQuery）

HTML

<div class="section">
  <div class="imgBox inview_re fadeIn">
    <img src="https://125naroom.com/demo/common/img/slide01.svg" alt="">
  </div>
  <div class="imgBox inview_re fadeIn">
    <img src="https://125naroom.com/demo/common/img/slide03.svg" alt="">
  </div>
  <div class="txtBox inview_re fadeIn">
    <p>ふわっと</p>
  </div>
</div>

CSS

/* ===== 見本の箱（動きが分かりやすいように付けた見た目。なくても動きます） ===== */
.section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}
.imgBox img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.txtBox p {
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid #e8e3d8;
  border-bottom: 1px solid #e8e3d8;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

/* ===== フェードイン（ふわっと、繰り返す） ===== */
.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}

/* 動きを減らす設定のとき（動かさずに表示） */
@media (prefers-reduced-motion: reduce) {
  .fadeIn { transition: none; }
}

jQuery

$(function () {
  $(".inview_re").on("inview", function (event, isInView) {
    if (isInView) {
      $(this).stop().addClass("is-show");
    } else {
      $(this).stop().removeClass("is-show");
    }
  });
});
見本ページをひらく（フェードイン・ふわっと、繰り返す）

【サンプル】下からフェードイン（ふわっと、繰り返す）

スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。

コードを見る（HTML・CSS・jQuery）

HTML

<div class="section">
  <div class="imgBox inview_re fadeIn_up">
    <img src="https://125naroom.com/demo/common/img/slide01.svg" alt="">
  </div>
  <div class="imgBox inview_re fadeIn_up">
    <img src="https://125naroom.com/demo/common/img/slide03.svg" alt="">
  </div>
  <div class="txtBox inview_re fadeIn_up">
    <p>ふわっと</p>
  </div>
</div>

CSS

/* ===== 見本の箱（動きが分かりやすいように付けた見た目。なくても動きます） ===== */
.section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}
.imgBox img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.txtBox p {
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid #e8e3d8;
  border-bottom: 1px solid #e8e3d8;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

/* ===== 下からフェードイン（ふわっと、繰り返す） ===== */
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* 動きを減らす設定のとき（動かさずに表示） */
@media (prefers-reduced-motion: reduce) {
  .fadeIn_up { transition: none; }
}

jQuery

$(function () {
  $(".inview_re").on("inview", function (event, isInView) {
    if (isInView) {
      $(this).stop().addClass("is-show");
    } else {
      $(this).stop().removeClass("is-show");
    }
  });
});
見本ページをひらく（下からフェードイン・ふわっと、繰り返す）

【サンプル】左からフェードイン（ふわっと、繰り返す）

スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。

コードを見る（HTML・CSS・jQuery）

HTML

<div class="section">
  <div class="imgBox inview_re fadeIn_left">
    <img src="https://125naroom.com/demo/common/img/slide01.svg" alt="">
  </div>
  <div class="imgBox inview_re fadeIn_left">
    <img src="https://125naroom.com/demo/common/img/slide03.svg" alt="">
  </div>
  <div class="txtBox inview_re fadeIn_left">
    <p>ふわっと</p>
  </div>
</div>

CSS

/* ===== 見本の箱（動きが分かりやすいように付けた見た目。なくても動きます） ===== */
.section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}
.imgBox img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.txtBox p {
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid #e8e3d8;
  border-bottom: 1px solid #e8e3d8;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

/* ===== 左からフェードイン（ふわっと、繰り返す） ===== */
.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
body {
  overflow-x: hidden; /* 横からのときは、はみ出しを隠す */
}

/* 動きを減らす設定のとき（動かさずに表示） */
@media (prefers-reduced-motion: reduce) {
  .fadeIn_left { transition: none; }
}

jQuery

$(function () {
  $(".inview_re").on("inview", function (event, isInView) {
    if (isInView) {
      $(this).stop().addClass("is-show");
    } else {
      $(this).stop().removeClass("is-show");
    }
  });
});
見本ページをひらく（左からフェードイン・ふわっと、繰り返す）

【サンプル】右からフェードイン（ふわっと、繰り返す）

スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。

コードを見る（HTML・CSS・jQuery）

HTML

<div class="section">
  <div class="imgBox inview_re fadeIn_right">
    <img src="https://125naroom.com/demo/common/img/slide01.svg" alt="">
  </div>
  <div class="imgBox inview_re fadeIn_right">
    <img src="https://125naroom.com/demo/common/img/slide03.svg" alt="">
  </div>
  <div class="txtBox inview_re fadeIn_right">
    <p>ふわっと</p>
  </div>
</div>

CSS

/* ===== 見本の箱（動きが分かりやすいように付けた見た目。なくても動きます） ===== */
.section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}
.imgBox img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.txtBox p {
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid #e8e3d8;
  border-bottom: 1px solid #e8e3d8;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

/* ===== 右からフェードイン（ふわっと、繰り返す） ===== */
.fadeIn_right {
  opacity: 0;
  transform: translate(50%, 0);
  transition: 2s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
body {
  overflow-x: hidden; /* 横からのときは、はみ出しを隠す */
}

/* 動きを減らす設定のとき（動かさずに表示） */
@media (prefers-reduced-motion: reduce) {
  .fadeIn_right { transition: none; }
}

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/3.7.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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス
jQuery（英語版）

さいごに

ふわーっとしたパンが食べたいですねー
いいですねー、買いに行きましょうー

関連記事

【JavaScript】画像を遅延表示させる『lazysizes』の実装サンプル集
デザインのメモ 2024.5.21

デザコトauthor

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。