プラカンブログSTAFF BLOG

2015.06.30

「jQuery.inview」の使い方

タイトル画像5月

こんにちは。デザイナーの鈴木です。
2回目のブログ登場です。
今回もまじめにプラグインの紹介をします。

今回は「jQuery.inview」というプラグインを紹介します。
前回「fullPage.js」というjQueryプラグインを説明しましたが、
読み込んだ一回目にしかアニメーションなどの動作が反応しない欠点がありました。
そこで「jQuery.inview」と組み合わせることで細かい挙動が可能になります。

ちなみに「jQuery.inview」と「fullPage.js」を組み合わせてWebページも制作しています。
(制作したサイトはこちら

「jQuery.inview」とは

要素が画面内に現れた時にイベントを実行するjQueryプラグインです。
実際の動きは下記ページのデモをご覧ください。
※下部にある参考サイトのデモページになります。

http://www.dataplan.jp/demo/jquery_inview/

「jQuery.inview」の使い方

まずは必要なファイルを下記から一式ダウンロード。
https://github.com/protonet/jquery.inview

ダウンロードしたファイルから下記を読み込みます。
jquery.inview.js

読み込む記述は下記のようになります。
※jQuery本体ファイルの読み込みを忘れずに!


JavaScriptの記述方法

基本的にはhead内か外部JSとして下記のコードを記述すれば、イベントが実行されます。

$('要素').on('inview', function() {
// 要素が画面に表示された時に実行する処理を記述
});

htmlの記述方法

イベントを発生させたい要素をHTML内に記述します。

出現させる要素

例として「div」としていますが、実際はタグだけでなく、idやclassでも指定は可能です。
あらかじめCSSを指定し、animateなどを組み合わせることでいろいろな動作が可能になります。

「jQuery.inview」の基本的な実装は以上になります。

オプション

細かい設定としてコールバック関数の引数として
「isInView」、「visiblePartX」、「visiblePartY」の3つが用意されています。

「isInView」は要素が表示域に見えるかで「true」か「false」になります。

「visiblePartX」は要素の左右を基準に表示域に見えるかで
「left」、「right」、「both」になります。

「visiblePartY」は要素の上下を基準に表示域に見えるかで
「top」、「bottom」、「both」になります。

基本的な使い方としては「isInView」で十分ですが、
要素の全体が表示域に見えてから動作を実行したいなど
細かい条件を必要と場合は、「visiblePartX」と「visiblePartY」を組み合わせるといいと思います。

実装してみて

簡単に実装でき、CSSや実行したい処理を自由に設定でき、とても便利なライブラリでした。
パララックスのWEBサイト制作には心強いですよ。
jQuery初心者でも導入しやすいので、ぜひ試してみてください!!

今回はここまでになります。
それではまたの機会に!

参考リンク

下記サイトは制作するに当たって参考にしたサイトになります。
使い方ももっと詳しく紹介しています。
詳細が知りたい方はどうぞ!

http://c-brains.jp/wp/wsg/13/07/25-095600.php
http://www.dataplan.jp/wp/jquery/766

この記事は、SUZUKI が書きました。