스크롤을 이용한 이미지 애니메이션

스크롤을 이용한 이미지 애니메이션을 알아보자

아래로 스크롤하다가 해당 요소에 접근했을때 active 클래스명을 부여해주고 해당 클래스명이 붙으면 가려두었던 이미지가 왼쪽부터 오른쪽으로 나타나게 하는 코드입니다.

 

 

HTML 구조

<div class="con">
	<div class="img_box">
		<img src="이미지 경로" width="100%;">
	</div>
</div>

 

CSS

.con .img_box {position:relative;}
.con .img_box:after {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:99;background:#fff;transition:transform 0.8s ease-in-out;transform:translate3d(0, 0, 0);}
.con .img_box.active:after {transform:translate3d(100%, 0, 0);}

 

Javascript

<script>
    document.addEventListener('scroll', function() {
        const imgBoxes = document.querySelectorAll('.con .img_box');
        imgBoxes.forEach(imgBox => {
            const rect = imgBox.getBoundingClientRect();
            // 요소가 뷰포트에 들어왔는지 확인
            if (rect.top < window.innerHeight && rect.bottom > 0) {
                imgBox.classList.add('active');
            }
            // active 클래스가 이미 존재하면 제거하지 않음
        });
    });
</script>