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

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

ふわーっと

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

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

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

See the Pen 【jQuery】『inview.js』フェードイン（ふわっと） by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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");
    }
  });
});

サンプルページはこちら

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

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

See the Pen 【jQuery】『inview.js』下からフェードイン（ふわっと） by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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");
    }
  });
});

サンプルページはこちら

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

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

See the Pen 【jQuery】『inview.js』左からフェードイン（ふわっと） by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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");
    }
  });
});

サンプルページはこちら

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

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

See the Pen 【jQuery】『inview.js』右からフェードイン（ふわっと） by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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");
    }
  });
});

サンプルページはこちら

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

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

See the Pen 【jQuery】『inview.js』フェードイン（ふわっと、繰り返す） by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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");
    }
  });
});

サンプルページはこちら

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

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

See the Pen 【jQuery】『inview.js』下からフェードイン（ふわっと、繰り返す） by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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");
    }
  });
});

サンプルページはこちら

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

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

See the Pen 【jQuery】『inview.js』左からフェードイン（ふわっと、繰り返す） by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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");
    }
  });
});

サンプルページはこちら

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

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

See the Pen 【jQuery】『inview.js』右からフェードイン（ふわっと、繰り返す） by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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

jQuery日本語リファレンス

jQuery（英語版）

さいごに

ふわーっとしたパンが食べたいですねー

いいですねー、買いに行きましょうー

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

Author

デザコト

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

2022

【jQuery】規約を一番下までスクロールするとボタンが押せる

規約を一番下までスクロールするとボタンが押せるようにしたいのですができますかー？ふむふむなるほど、よく見かけますねー、活性化ですねー、できますよー。規約を一番下までスクロールするとボタンが押せる、実装一番下までスク

...

jQuery

デザインのメモ

2024

【jQuery】スライダープラグイン「slick」実装サンプル集

slick（スリック）の使い方をまとめてくださいーわかりましたーよく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

...

jQuery slick

デザインのメモ

2024

【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら）

するする動くと楽しいですねー固定ヘッダーがある場合はクラスやIDを指定して高さ調整しましょうー JavaScript 固定のヘッダー（ナビ）がある場合はヘッダー分の高さを調整しなければなりません。レスポンシブだと高さが

...

jQuery

デザインのメモ

Googleさんの
おすすめ

2025

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

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

HTML

CSS

jQuery

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

HTML

CSS

jQuery

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

HTML

CSS

jQuery

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

HTML

CSS

jQuery

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

HTML

CSS

jQuery

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

HTML

CSS

jQuery

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

HTML

CSS

jQuery

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

HTML

CSS

jQuery

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

『inview.js』の使い方

HTML

1回だけの場合（参考）

繰り返す場合（参考）

HTML（参考）

CSS（参考）

メモ

さいごに

関連記事