엘리먼트가 화면에 나타나면 에니메이션 사용하기

아래같은 코드는 항상 사용하는 것이 아니라..생각이 별로 하기 싫어서 이렇게 만들어 놓고 필요할때 가져다 쓰려고 만들어 놓는다.

오브젝트가 윈도우 안에 들어 왔는지를 알아내는 코드이다.

마우스를 스크롤 할때,

현재 윈도우의 크기 ( $(window).height() ) 

이미 스크롤 했던 스크롤의 크기 ( $(window).scrollTop() ) 를 더해서 

찾고자 하는 오브젝트의 바닥면의 위치 ( $("#item").position().top ) + ($("#item).outerHeight())

가 안에 들어 오면 발견 했다라고 치는 코드 이다..

에니메이션은 animate.css를 사용 했고 여기 서 가져왔다

<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div id="item"> $(this).position().top : <span id="obj1_top"></span> <br> $(this).outerHeight() : <span id="obj1_height"></span> <br> object : <span id="obj1"></span> <br> $(window).scrollTop() : <span id="obj2_top"></span> <br> $(window).height() : <span id="obj2_height"></span> <br> win : <span id="win1"></span> <br> </div> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script> $(function(){ $(window).scroll(function(){ $('#item').each(function(i){ var bottom_of_object = $(this).position().top + $(this).outerHeight(); //outerHeight() : border를 포함한 높이 var bottom_of_window = $(window).scrollTop() + $(window).height(); //scrollTop : 스크롤되어 올라가있는 만큼의 높이 , $(window).height() : 브라우저 창높이 $('#obj1_top').text($(this).position().top); $('#obj1_height').text($(this).outerHeight()); $('#obj1').text(bottom_of_object); $('#obj2_top').text($(window).scrollTop()); $('#obj2_height').text($(window).height()); $('#win1').text(bottom_of_window); //오브젝트가 윈도우에 완전히 보이면 if( bottom_of_window > bottom_of_object){ $('#item').addClass('animated rubberBand'); } }); }); }); </script>