jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションする方法｜DAD UNION

Webサイトにおいて、訪問者がページをスクロールするとコンテンツが動的に表示される仕組みは、ユーザーの目を引く効果的な手法です。
例えば、画像やテキストがふわっと表示されたり、スライドインしたりすることで、視覚的なインパクトを与えることができます。このような機能を簡単に実装できるのが「jquery.inview.js」と「animate.css」です。
本記事では、jquery.inview.jsを使用して、コンテンツエリアが画面に表示された瞬間にアニメーションする方法を初心者向けに詳しく解説します。JavaScriptの基礎から実際のコード例、応用方法までカバーしていますので、ぜひ最後までお読みください。

Contents

jquery.inview.jsとは？
事前準備：必要なファイルを読み込む
ステップ1：CSSの記述
ステップ2：HTMLの記述
ステップ3：JavaScriptの記述
jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションするデモページ
ソース元：jquery.inview
応用例：アニメーションの追加
まとめ

jquery.inview.jsとは？

jquery.inview.jsは、要素がブラウザのビューポート（表示領域）に入った瞬間を検知できるjQueryプラグインです。この機能を利用することで、スクロールに応じてアニメーションや動作を実行することができます。

例えば、次のようなシチュエーションで活躍します。

画面に表示された瞬間に画像やテキストがアニメーションする
ページ下部に到達したときにコンテンツを動的に読み込む
スクロールして見えなくなったら非表示に戻す

このプラグインは非常にシンプルで、基本的なjQueryの知識があれば誰でも簡単に導入できます。

事前準備：必要なファイルを読み込む

jquery.inview.jsを使用するには、以下のライブラリとファイルが必要です。

jQueryライブラリ（1系または2系）
jquery.inview.min.js
CSSアニメーションライブラリ「animate.css」

これらのファイルはCDN（コンテンツデリバリーネットワーク）経由で簡単に読み込むことができます。

ステップ1：CSSの記述

まずは、ページ全体のスタイルとアニメーション対象のCSSを設定します。
様々な動きのパターンを集めたCSSライブラリanimate.min.cssファイルを読み込みます。ここでは、要素を中央に配置し、基本的なデザインを整えます。アニメーション表示するコンテンツエリアギャラリー表示エリア（div）のCSS記述です。

<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 18px;
  line-height: 1.6em;
  padding-top: 20px;
}
p{
  padding-bottom: 600px;
  font-size: 18px;
}
div {
  text-align:center;
  width:400px;
   padding:50px 0;
  margin:100px auto;
}
</style>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>

ステップ2：HTMLの記述

次に、アニメーション対象のHTMLを作成します。今回は3つの画像を表示し、それぞれ異なるアニメーションを適用します。
アニメーション表示するコンテンツエリア（class=”box1 animated”、class=”box2 animated”、class=”box2 animated”）に画像（1.jpg～3.jpg）を用意します。

<h1>jquery.inview.jsを使ってコンテンツエリアが画面表示時にアニメーションします。</h1>
<p>下に600pxスクロールして下さい。</p>

<div class="box1 animated"><img src="1.jpg" width="100%"></div>
<div class="box2 animated"><img src="2.jpg" width="100%"></div>
<div class="box3 animated"><img src="3.jpg" width="100%"></div>

ステップ3：JavaScriptの記述

JavaScriptを使用して、各要素がビューポートに表示された瞬間にアニメーションを適用します。
jquery.min.js（1系）、jquery.inview.min.jsファイルを読み込みます。$(‘アニメーション表示するコンテンツエリア’).on(‘inview’, function (event, param) {アニメーション処理})を記述することで「アニメーション表示するコンテンツエリア」にアニメーション処理が実行されます。

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src='jquery.inview.min.js'></script>
<script>
$(function () {
  $('.box1').on('inview', function (event, param) {
    if (param) {
      $(this).addClass('fadeInDown');
    } else {
      $(this).removeClass('fadeInDown');
      $(this).css('opacity', 0);
    }
  });

  $('.box2').on('inview', function (event, param) {
    if (param) {
      $(this).addClass('bounceIn');
    } else {
      $(this).removeClass('bounceIn');
    }
  });

  $('.box3').on('inview', function (event, param) {
    if (param) {
      $(this).addClass('lightSpeedIn');
    } else {
      $(this).removeClass('lightSpeedIn');
    }
  });

});
</script>

上記のコードでは、各要素が表示領域に入った瞬間にCSSクラス（animate.cssのアニメーションクラス）を追加し、非表示になったらクラスを削除しています。