要素が画面内に現れた時にイベントを実行する jQuery.invew プラグインの使い方

要素が画面内に現れた時にイベントを実行する jQuery.invew プラグインの使い方
このエントリーをはてなブックマークに追加
PR

パララックスの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 実行内容を書く

 

DEMO 表示

 

 

STEP 1

まずはHTMLでjQueryを読み込ませましょう

 

ダウンロードはこちらで

http://jquery.com/download/

 

テスト環境なら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 を使うと時間差で実行させることが出来ます

DEMO 表示

 

<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サイトを作るときに便利かと思います

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)