【jQuery不要】軽量JS「in-view.js」でスクロール連動イベントを簡単実装

Webサイトを制作していると、「コンテンツが画面内に入ったら、フワッと表示させる」といったスクロール連動のアニメーションを実装したい場面がよくありますよね。

JavaScriptを使えば実現できますが、自力でスクロール位置を監視するのは少し手間がかかります。そんな時、便利なのが「ビューイン（画面内に入ったか）」を判定してくれるJavaScriptライブラリです。

今回は、数あるライブラリの中でも、jQuery不要で動き、特に発火点（アニメーションを開始させる位置）の調整が簡単な「in-view.js」をご紹介します。

「in-view.js」とは？

「in-view.js」は、指定した要素がブラウザの表示領域（ビューポート）に入ったか、または出たかを検出する軽量なJavaScriptライブラリです。

よく似た名前の「inview.js」（ハイフンなし・jQuery依存）という別のライブラリもありますが、今回ご紹介する「in-view.js」には以下のメリットがあります。

• jQueryが不要（単体で動く）
• offset（オフセット）の設定が簡単（要素が画面のどの位置まで来たら「入った」と判定するかを直感的にずらせる）

まずはデモをご覧ください

まずはjsFiddleで実際の動作デモをご覧ください。スクロールしていくと、要素が画面内に入ったタイミングでテキストが切り替わります。
※デモ内の下の要素が今回紹介している挙動です。

in-view.js の導入方法

導入はとても簡単です。

Step 1. ファイルのダウンロード

まず、GitHubリポジトリからファイルをダウンロードします。
必要なファイルは in-view.min.js（圧縮版）本体のみです。

Step 2. HTMLでの読み込み

ダウンロードしたファイルを任意の場所（例：js/ フォルダ）に配置し、HTMLファイルで読み込みます。

<script src="js/in-view.min.js" type="text/javascript"></script>

基本的な使い方

基本的な使い方を見ていきましょう。

Step 1. HTMLの準備

まず、監視したい要素（アニメーションさせたい要素）に、目印となるクラス名（例：js-in-view）を付けます。

<p class="js-in-view">この要素が画面内に入ったら動作を実行します</p>

Step 2. JavaScriptの記述

次に、JavaScriptファイルで inView() を実行します。

inView('.js-in-view')
  .on('enter', el => {
    // .js-in-view がビューイン（画面内に）したら実行
    
    // パターンA：クラスを付与する場合（CSSでアニメーション管理）推奨！
    el.classList.add('is-show');

    // パターンB：直接スタイルを書き換える場合
    // el.style.opacity = 1;
  })
  .on('exit', el => {
    // .js-in-view がビューアウト（画面外に）したら実行
    el.classList.remove('is-show');
    
    // el.style.opacity = 0;
  });

.on('enter', ...) が、要素が画面内に入ったときに実行する処理です。
.on('exit', ...) は、逆に要素が画面から出たときに実行する処理です。基本的にはCSSクラス（is-showなど）を付け外しし、実際の動き（フェードインなど）はCSS側で transition を使って制御するのが管理しやすくおすすめです。

【最大の特徴】発火点の調整 (offset)

in-view.js の便利な点が、この offset 設定です。
デフォルトでは、要素が1ピクセルでも画面に入ると ‘enter’ イベントが発生しますが、これを調整できます。

例えば、「要素が画面の下から100px入ってきたタイミングで発火させたい」場合は、以下のように記述します。

// グローバルにオフセットを設定（単位はpx）
inView.offset(100);

// 監視を実行
inView('.js-in-view')
  .on('enter', el => {
    el.classList.add('is-show');
  });

inView.offset(100); と指定するだけで、ビューポート（表示領域）が上下100pxずつ狭まったものとして判定されます。これにより、「画面のギリギリで発火する」のではなく、「少し余裕を持って画面中央に近づいてから」アニメーションを開始させることができます。

まとめ

「in-view.js」は、軽量かつjQuery不要で、スクロールアニメーションの実装にとても便利なライブラリです。特に「ちょっと早めに／遅めにアニメーションさせたい」といった発火点の微調整がコード1行で済むのが魅力です。

Webサイトに動きをつけたい時の手軽な選択肢として、ぜひ試してみてはいかがでしょうか。

よくある質問（FAQ）

Q似た名前の「inview.js」（ハイフンなし）との違いは何ですか？

大きな違いは「jQueryへの依存」と「設定の手軽さ」です。ハイフンなしの「inview.js」は動作にjQueryが必要ですが、今回紹介した「in-view.js」（ハイフンあり）は単体で動作します。また、offset() メソッドによる発火点の調整が非常に直感的である点も本ライブラリの特徴です。

スクロールで画面外に出たら、再度非表示（元に戻す）にしたい場合はどうすれば良いですか？

.on('exit', ...) イベントを使用します。'enter' で追加したCSSクラスを、'exit' で削除するように設定すれば、画面内に出入りするたびにアニメーションを繰り返すことができます。

一度表示されたら、スクロールで画面外に出ても非表示にしたくありません。

その場合は、.on('exit', ...) の記述を省略するか、inView.once() メソッドを使用します。inView.once('.js-in-view') と記述すると、'enter' イベントが一度だけ発火し、その後の監視が自動的に停止されます。