画面に要素が現れたかどうかを取得する in-view.js の使い方

in-view.js
今回は指定した要素がブラウザ上に現れたかどうか（ビューへのイン・アウト）を取得してくれるJSライブラリをご紹介します。
どんなときに使えるかざっくり言うと「画像はスクロールして画面に出てきたら読み込む」ためのスイッチや、縦長サイトでのアニメーション演出のスイッチとして便利かなと思います。

用意するもの

まずはこちらのGitHubからデモを含めたファイル一式をダウンロードしましょう。
いろいろと入っていますが最低限必要なのはin-view.jsのみです。

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

基本的な使い方

まずはビューへのイン・アウトを取得したい要素にclassを振ります。

<div class="view">ビューイン・アウトを取得する要素</div>

あとはjavascriptで下記のように設定するだけで最低限の動作設定は完了します。
公式のレジュメに書いてあるように、『inView(‘指定要素’).on(‘イベントの指定’,’イベント取得の際の処理’)』を元に自分が行いたい処理を記述していきます。ここではサンプルとして指定要素のopacityを変更しています。

inView(‘.view’)
  .on('enter', el => {
  //elはビューインした要素が入っている。
  el.style.opacity = 1;
  })
  .on('exit', el => {
  //elはビューアウトした要素が入っている。
  el.style.opacity = 0.3;
  });

ここではstyleの変更を行いましたが、cssのtransitionやanimationと組み合わせるならclassの付け替えにしちゃうのが現実的かなと思います。

それとよく使いそうなオプション（API）をピックアップすると、
・一回だけ処理を行う『inView(‘selector’).once(‘event’, ‘handler’)』
・ビューイン・アウトの判定位置をずらすための『inView.offset(‘offset’)』
このあたりでしょうか。

ちなみに、もうほとんど気にする必要もないかと思いますがブラウザサポートはIE9+となっています。

ほか詳細に関しては、GitHubをご参照ください。