要素が画面内に現れた時にイベントを実行する jQuery.invew プラグインの使い方
パララックスのWEBサイト等で
スクロールしていくと、次々にコンテンツが表示されたり
アニメーションしたりするものがありますよね
そういったものを簡単に実装することが出来るのが jQuery.inview というプラグインです
jQueryの読み込みと、こちらのプラグインの読み込み、そして 要素を指定して、実行内容を書くだけです
予め用意したCSSを食えわ得たやることで、アニメーションで効果を与えたり
data- をつかって、画像を遅らせて読み込ませる lazy load にすることも出来ます
要素が見えた時にイベントを実行するので
あとはアイディア次第で色々と工夫できるかと思います
つまり、クリックとかの動作とおなじ感覚で 画面に要素が表示されたというイベントが使えるようにする
プラグインということです
jQuery.invew 基本的な使い方
プラグインのダウンロードは以下のリンクから、ライセンスはパブリックでフリーです
https://github.com/protonet/jquery.inview
基本的な、単純な使い方としては次の4つのSTEPで利用出来ます
- STEP1 jQueryを読み込む
- STEP2 jQuery.invewプラグインを読み込む
- STEP3 基本的な文
- STEP4 実行内容を書く
STEP 1
まずはHTMLでjQueryを読み込ませましょう
ダウンロードはこちらで
テスト環境ならCDNを使って、そのままHTMLに読み込ませてもOK
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
jQuery.invewの読み込みより上に書くこと
ダウンロードして利用する場合は、srcのリンクをダウンロードしたものを設置した場所に合わせます
STEP 2
次に jQuery.invew をHTMLで読み込みます
ダウンロードしたものに入っている
jquery.inview.min.js もしくは jquery.inview.js を読み込ませます
<script src="jquery.inview.min.js"></script>
jQuery よりもあとに読み込ませます
STEP 3
あとは、要素の表示をイベントとする基本的な文を書きます
その文に、実行したい内容を追加します
<script>
$('div').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
/*ここに実行したい内容を書く*/
});
</script>
この文は jQuery.inview よりも後に書きましょう
$(‘div’) この箇所が、イベントの実行のポイントです
つまり divタグが画面に表示されたら実行するというものです
この部分は CSSセレクタで色々指定できます
例えば
- $(“.first”)
- $(“#main”)
- $(“nav ul li”)
- $(“input[type=”text”]”)
等々いろいろ指定出来ます
STEP 4
最後に実行内容を書いてやれば、これで要素が表示された時に何かしらのアクションを起こすことが出来ます
今回は、widthが変化して それがアニメーションするようにしています
<script>
$('div').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
/*ここに実行したい内容を書く*/
$(this).animate({width:800},1000);
});
</script>
$(this) は、イベントの対象そのものに効果を与えるものです
なので、divが表示された瞬間に アニメーションで変化する内容が実行されます
jQuery、jQuery.invew、実行コードをまとめると
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.inview.min.js"></script>
<script>
$('div').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
/*ここに実行したい内容を書く*/
$(this).animate({width:800},1000);
});
</script>
このようになります
jQuery.inview の実行の応用
上の例では、要素が表示されたらすぐに実行したのですが
これを少し時間をおいてから実行したいときは setTimeout を使うと時間差で実行させることが出来ます
<script>
$('div').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
/*setTimeoutではthisうまく使えないのを回避するために*/
var div = $(this);
/*遅れて実行させる内容*/
setTimeout(function(){
$(div).animate({width:800},600);
},500);//500が遅延の時間 500ミリ秒
});
</script>
$(this)がsetTimeout 内では上手く動かないので
divという変数に入れることで、対応しています
最後の方の 500 というところが、遅延の時間になります
パララックスなWEBサイトを作るときに便利かと思います
COMMENT