2016.12.03

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

posts_photo

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をご参照ください。


記事のタグ一覧:

スポンサードリンク

関連記事

カテゴリー内のおすすめ記事