Cntlog > スキルアップ・ノウハウ > JavaScript・jQuery > 【jQuery不要】スクロールで画面内・外の要素を制御するJSライブラリ in-view.js

【jQuery不要】スクロールで画面内・外の要素を制御するJSライブラリ in-view.js

ページスクロールをして、特定の要素がウインドウ内で表示されたタイミングを検知してアニメーションをさせたり、classをつけるといった要望はよくありますね。

以前はjquery.inviewを使っていたのですが、jQueryに依存(1系に)してることもあって、使えるシーンがすくなっていました。

そこで、jQueryに依存しないライブラリで、画面内の要素検知ができるものがあったので紹介します。

in-view

in-view.jsはすべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。

in-viewのinstall

npmでinstallする方法とダウンロードしたものを読み込む2パターンがあります。

npm install --save in-view

公式サイトには書いてなかったのですが、CDN版もありました。

<script src="https://cdn.jsdelivr.net/npm/in-view@0.6.1/dist/in-view.min.js"></script>

使い方

使い方はシンプルで対象となる要素を指定し、ビューポートに入った時(enter)と出る時(exit)にエフェクトを記述します。

inView('.someSelector')
    .on('enter', doSomething)
    .on('exit', el => {
        el.style.opacity = 0.5;
    });

一度しか適応したくない場合は.onではなく.onceを使います。

inView('.someSelector').once('enter', doSomething);

画面内にいるかどうかの判定もできますのでif文でなにかするとかも可能です。

inView.is(document.querySelector('.someSelector'));// => true

どのくらい入り込んでると、画面内に入ったかをチェックもできます。

inView.offset(100);
inView.offset(-50);

デモ

関連記事

【JavaScript】PCサイトかスマートフォンサイトを選択させるスクリプト... PC向けサイトにアクセスした際にスマートフォン向けサイトを表示するか選択してもらうスクリプトを書きました。 今回はJavaScriptで作っています。 //iPhone、iPad、AndroidのURLをリダイレクト(選択)させる $(function(){ ...
npmで書くときの簡単な書き方 package.jsonを作る この書き方だと何も聞かれずにいい感じのpackage.jsonが作られる。 npm init -y packageのインストール方法 npm install ––save-devの省略系です。 書き方が短くなって便利。 npm i ...
Nuxt.jsでSCSSの変数をvueファイルでも使えるようにする... Nuxt.jsを使ってみるとSCSSで設定した変数やMixinがVueファイルで使えなかったのでVueファイルでも使える用に設定する方法を紹介します。 インストール まずはnpmで下記をインストールします。 npm add --dev node-sass sass-loader ...
VueやNuxt.jsでよく利用しているライブラリ... Nuxt.jsめちゃくちゃ便利なのですが、使うならNuxtやVueに特化して作られたもののほうが、トラブルも少なくて積極的にそっち系のライブラリを選んで利用しています。 この記事で私がよく使っているライブラリを紹介します。 UIライブラリ buefy buefyはbulmaを...
Vue.jsの入門レベルを学ぶためにやったこと... ここ3ヶ月くらい気になっていたVue.jsを使うようになりました。 私はJSがそれほど得意ではないのですが、Veu.jsは日本語の情報も多くて、調べると結構情報が出てきます。 とはいえ、初めて使うあるあるだと思うのですが、何から手を付けていいかわからない問題に出くわすと思います。 手探...
Vue.jsとmoment.jsでカウントダウンタイマーを作る(サンプルコード有り)... カウントダウン系のライブラリは結構ありますが、Vue.jsとmoment.jsを使うだけで簡単にカウントダウンの数字を生成できるのでご紹介します。 vue.jsとmoment.jsを使う理由 vue.jsは簡単にデータの受け渡しができるので、リアルタイムにデータの反映ができるようになりま...