해당 오브젝트가 화면 영역 안에 반 이상 들어왔는지 체크하는 자바스크립트 함수입니다.

스크롤 처리할때 사용하려고 했는데 이거 생각하는 시간이 아깝고.. 플러그인 사용하자니 귀찮아서 적었습니다.

제이쿼리 없이 사용하시려면 제이쿼리 셀렉터 부분만 변경하시면 될 것 같고, 아니면 return만 참조하시면 될 것 같아요.

더 좋은 수식이나 방법이 있겠지만.. 혹시나 유용하실 분들이 있을 것 같아서 올려봅니다.


function isEntered(o)
{
var h = $(window).outerHeight(); //화면 높이

var top = $('html,body').scrollTop(); //화면 상단 스크롤 위치
var bot = top + h; //화면 하단 스크롤 위치

var oTop = o.offset().top; //오브젝트 상단 스크롤 위치
var oBot = oTop + o.outerHeight(); //오브젝트 하단 스크롤 위치

return (top < oTop ? (oTop <= bot && (oBot - bot) < (bot - oTop)) : ((oBot >= top) && ((oTop - top) < (oBot - top))));
}


아래와 같이 사용하시면 되겠습니다.

$(window).scroll(function(){

$(".has_anim").not(".animated").each(function(){
if(isEntered($(this)))
{
//화면에 나타났을때 액션
}
});
});