以前に仕事で使用したのですが、結構便利だったのでご紹介です
指定した要素が画面内に表示されたら設定した動作をさせる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」の方がおすすめです
（名前が紛らわしいですが）
コメント