채택완료
웹페이지에서 특정위치(스크롤내릴때)에서 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개
채택된 답변
+20 포인트
2020-09-21 (월) 18:38:21
js 의 도움을 받아보시는것도 좋습니다~
2020-09-22 (화) 12:40:18
잘 해결되었어요^^
정말 감사합니다~
2020-09-21 (월) 19:30:42
Copy
<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>답변을 작성하려면 로그인이 필요합니다.