スポンサーリンク

画面に要素が現れたら発火する「in-view.js」

javaScript

in-view.js

以前に仕事で使用したのですが、結構便利だったのでご紹介です
指定した要素が画面内に表示されたら設定した動作をさせるJSライブラリです
似たようなもので「inview.js」というのもあるのですが、「in-view.js」はjQueryを使用していない環境でも動作します

使用するのは主に縦長のページで「スクロールして指定した要素が画面内に表示されたらアニメーションさせたい」といった場合に使用します
参考サイト

使用方法

用意するもの

こちらからJSファイルをダウンロードして読み込みます
GitHubからも入手できます、必要なファイルは本体のみです

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

使い方

まずイン・アウトを取りたい要素にクラス名を付けます

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

そしてJSファイルで下記設定をするだけです
サンプルで不透明度をいじってます

inView(‘.view’)
  .on('enter', el => {
  //ビューインしたら実行
  el.style.opacity = 1;
  })
  .on('exit', el => {
  //ビューアウトしたら実行
  el.style.opacity = 0;
  });

その他設定

1回だけ処理を実行したい場合は「.once」を使います
inView('.view').once('enter', doSomething);
発火点をズラす場合はoffsetの設定ができます

top、bottomだけではなくright、leftもあるので横スクロールにも対処できます

inView.offset({
    top: 100,
    right: 75,
    bottom: 50,
    left: 25
});

offsetの設定は共通になります、セレクタを分けて設定はできないので
「この要素はtop200で発火させてこの要素はtop100で発火させる」みたいなことは出来ません

その他設定はGitHubに記載されてます

まとめ

要素が表示されたらアニメーションするので有名なのは「wow.js」がありますが、「in-view.js」はもう少し細かく設定できます
またアニメーション以外のことも出来るので汎用性は高いです
(要素が表示したらカウンターを発火させるとか、要素が表示している間にホイールイベントが発生したらとか色々出来ます)
でもアニメーションだけならwow.jsの方が楽ですね

inview.js」の場合だとjQuery1系統でないと動作しないのですが、「in-view.js」はjQueryを使わないのでjQueryのバージョンに左右されないのがかなり強みだと思います
jQuery3系統も合わせて使いたい場合などは「in-view.js」の方がおすすめです
(名前が紛らわしいですが)

コメント

タイトルとURLをコピーしました