【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.8.30
- 【jQuery】slick を使ってスライドショー（横幅いっぱい＋前後のスライドを半透明にする）
- web / 2020.2.21
- 【jQuery】iOS（Safari）だと100vhが少しはみ出てしまう対策
- web / 2019.12.6
- 【jQuery】Lightboxプラグイン『Colorbox』の実装サンプル集
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
- web / 2019.7.22
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2019.7.24
- 【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
- web / 2019.7.19
- 【CSS】olのリストで①、②、③（丸数字）を表示させる
- web / 2019.10.2
- 【jQuery】モーダルプラグイン『Remodal』の実装サンプル集
- web / 2019.1.22
- 【CSS】三角アイコンと矢印アイコンをつくる
Googleさんのおすすめ
デザインの記事
- 2021.01.25New
- 旅する喫茶 – tabisuru kissa.
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.01.25New
- 旅する喫茶 – tabisuru kissa.
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.01.26New
- IDÉEさんのソファ
- もくじ リビングに新しい大きな家具 テレビを見るとき、映画を観るとき 家族会議を開き…
- いつかのこと – 無印良品の家と暮らす
- 2021.01.25New
- お食い初めとお正月
- もくじ お食い初めをしました こだわりのお頭付きの鯛 娘ちゃん100日おめでとう お食い…
- いつかのこと – 無印良品の家と暮らす