【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 - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

CORONE CORNE
  • 2020.08.04New
  • CORONE CORNE
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
CORONE CORNE
  • 2020.08.04New
  • CORONE CORNE
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
ぼくのトミカ #1
ぼくね、もっと走りたいんだよ