오브젝트가 스크린 영역 안에 반 이상 나타났는지 체크하는 스크립트 입니다. 정보
오브젝트가 스크린 영역 안에 반 이상 나타났는지 체크하는 스크립트 입니다.본문
해당 오브젝트가 화면 영역 안에 반 이상 들어왔는지 체크하는 자바스크립트 함수입니다.
스크롤 처리할때 사용하려고 했는데 이거 생각하는 시간이 아깝고.. 플러그인 사용하자니 귀찮아서 적었습니다.
제이쿼리 없이 사용하시려면 제이쿼리 셀렉터 부분만 변경하시면 될 것 같고, 아니면 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)))
{
//화면에 나타났을때 액션
}
});
});
스크롤 처리할때 사용하려고 했는데 이거 생각하는 시간이 아깝고.. 플러그인 사용하자니 귀찮아서 적었습니다.
제이쿼리 없이 사용하시려면 제이쿼리 셀렉터 부분만 변경하시면 될 것 같고, 아니면 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)))
{
//화면에 나타났을때 액션
}
});
});
추천
0
0
댓글 1개
좋아요..잘쓰겠습니다.감사합니다.