jquery.inviewを使うと簡単。
GitHub – protonet/jquery.inview
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<head> <script src="jquery.inview.min.js"></script> <!-- ローカルにDLして使う --> </head> <!-- 略 --> <p class="item">画面に入ると文字が大きくなる</p> <p class="item">画面に入ると文字が大きくなる</p> <p class="item">画面に入ると文字が大きくなる</p> <p class="item">画面に入ると文字が大きくなる</p> <p class="item">画面に入ると文字が大きくなる</p> <p class="item">画面に入ると文字が大きくなる</p> <p class="item">画面に入ると文字が大きくなる</p> <p class="item">画面に入ると文字が大きくなる</p> <p class="item">画面に入ると文字が大きくなる</p> <p class="item">画面に入ると文字が大きくなる</p> |
CSS
1 2 3 4 5 6 7 8 |
.item { font-size: 16px; padding: 10px; border: 1px solid red; margin-bottom: 500px; } |
jQuery
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ $('.item').on('inview', function(event, isInView) { if(isInView) { $(this).animate({ fontSize : '20px' }, 1000); } }); }); |
自分で何とかする方法
jquery.inviewを使わなくても、要素や画面の最上部・最下部の座標を取得して判定することもできる。
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$(function(){ //スクロールの度に実行 $(window).scroll(function(){ if(existsElementInView('element-name')) { //画面内にあるときの処理 //画面内にあるときの処理 //画面内にあるときの処理 } }); //要素が画面内に存在するかどうかをチェックする(厳密には指定の要素の"上端の座標"でチェックする) function existsElementInView(element) { console.log('-------'); var position = $(element).offset().top; // 画面内にあるかどうかを調べたい対象の要素の"上端"の座標 var view_height = $(window).height(); // 画面の高さ var view_top = $(window).scrollTop(); // 画面の表示領域の最上部 var view_bottom = view_top + view_height; // 画面の表示領域の最下部 console.log('position : ' + position); console.log('view_height : ' + view_height); console.log('view_top : ' + view_top); console.log('view_bottom : ' + view_bottom); //要素が画面内にあるかどうかをチェック if(position >= view_top && position <= view_bottom) { console.log('画面内にある : ' + element); return true; } console.log('画面内にない : ' + element); return false; } }); |
ただし、上記の場合だと
- 判定はスクロールしたときのみ
(画面を開いた時点で画面内に要素があっても、スクロールしない限りは”画面内にある”と判定されない) - 同じクラス名を持つ要素が複数あるときは、最初の1つしか判定できない
(idで判定するなら1つしかないので問題はない)
等の問題があるので、実際に使いたければもう少し改良の余地あり。
そのあたりを考慮すると最初からjquery.inviewを使う方が早い。
コメントを残す