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

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

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

jQuery日本語リファレンス

jQuery（英語版）

さいごに

きのこさん
ふわーっとしたパンが食べたいですー
きのこさん
いいですねー、作りましょー

関連記事

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

デザインのこと - Web design gallery
いつかのこと

おすすめ

かんれん

【jQuery】 ローディング、実装サンプル集

みる

【jQuery】クリッカブルマップ『RWD Image Maps』、レスポンシブでもズレませーん

みる

【jQuery】横並びの高さを揃える『matchHeight.js』実装サンプル集

みる

【jQuery】iOS（Safari）だと100vhが少しはみ出てしまう対策

みる

Googleさんのおすすめ

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

みる

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

みる

【jQuery】アコーディオン実装サンプル10選

みる

【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）

みる

more

Googleさんのおすすめ

デザインの記事

mono°goen°
  • 2022.01.13New
  • mono°goen°
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
mono°goen°
  • 2022.01.13New
  • mono°goen°
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
あったらいいなと思うもの／窓の家と生活
『未来のミライ』、何度も見てしまう