jquery.inviewを使うと簡単。
GitHub – protonet/jquery.inview
HTML
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
画面に入ると文字が大きくなる
CSS
.item {
font-size: 16px;
padding: 10px;
border: 1px solid red;
margin-bottom: 500px;
}
jQuery
$(function(){
$('.item').on('inview', function(event, isInView) {
if(isInView) {
$(this).animate({
fontSize : '20px'
}, 1000);
}
});
});
自分で何とかする方法
jquery.inviewを使わなくても、要素や画面の最上部・最下部の座標を取得して判定することもできる。
jQuery
$(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を使う方が早い。