animation이 컨텐츠가 보이면 실행되게..
본문
@-webkit-keyframes mymove {
0% { transform: translateY(20px); opacity:0;}
100% {transform: translateY(0); opacity:1;}
}
@keyframes mymove {
0% { transform: translateY(20px); opacity:0;}
100% {transform: translateY(0); opacity:1;}
}
이렇게 해서 컨텐츠가 서서히 나타나면서 위로 올라오게는 했습니다 그런데 적용시키려는 컨텐츠가 밑에 있다보니 상단에서는 animation을 볼수 없습니다. 그래서 스크롤을 내릴때 그 컨텐츠가 보이면 애니메이션이 실행되게 하는법좀 알려주십시오.. 부탁드립니다
답변 1
해당 애니메이션을 적용시킬 class만 따로 떼어서 스크롤시에 스크립트로 해당 class를 부여하면 됩니다.
제이쿼리 사용하면
$( window ).scroll(function() {
if(컨텐츠가 화면에 잡혔을때){
$(컨텐츠선택자).addClass('myclass');
}
}
이런식이 되고, $(window).scrollTop, $(window).outerHeight(), offset().top 등 이용해서 화면에 보이는지 체크하시면 될거 같습니다.
답변을 작성하시기 전에 로그인 해주세요.
