웹페이지에서 특정위치(스크롤내릴때)에서 CSS 에니메이션 실행 방법
본문
안녕하세요
CSS 에니메이션 효과인데
페이지 로딩이 때가 아닌
스크롤을 내릴때 해당 <div class="scale-up-hor-left">가 보이면 에니메이션이 동작되게 가능할까요?
몇시간동안 끌어안고 있는데 안되네요ㅜㅜ
<style>
.scale-up-hor-left{animation:scale-up-hor-left 8s cubic-bezier(.39,.575,.565,1.000) both}
@keyframes scale-up-hor-left{0%{transform:scaleX(0.4);transform-origin:0 0}100%{transform:scaleX(1);transform-origin:0 0}}
</style>
<div class="scale-up-hor-left"></div>
답변 3
<style>
.scale-up-hor-left{animation:scale-up-hor-left 8s cubic-bezier(.39,.575,.565,1.000) both}
@keyframes scale-up-hor-left{0%{transform:scaleX(0.4);transform-origin:0 0}100%{transform:scaleX(1);transform-origin:0 0}}
</style>
<div id="target_div"></div>
<script>
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta <= 0) {
if(!$('#target_div').hasClass('scale-up-hor-left')){
$('#target_div').addClass('scale-up-hor-left');
}
}
});
</script>
잘 해결되었어요^^
정말 감사합니다~
답변을 작성하시기 전에 로그인 해주세요.