scroll 이벤트 (스크롤 효과)

scroll 이벤트

 

방법 1

window.addEventListener('scroll', scrollEffect);

function scrollEffect(){
	const ELEMENT = document.querySelector('.element');
    
    if(window.scorllY >= 300){
    	ELEMENT.style.opacity = '1';
        ELEMENT.style.transform = 'translateX(0px)';
        ELEMENT.style.transition = '1s ease-in-out';
    }else{
    	ELEMENT.style.opacity = '0';
        ELEMENT.style.transform = 'translateX(-100px)';
    }
}

 

 

방법 2

function scrollAppear(){
	const ELEMENT = document.querySelector('.element');
	const ELEMENT_POSITION = ELEMENT.getBoundingClientRect().top;
	const SCREEN_POSITION = window.innerHeight;

	if(ELEMENT_POSITION < SCREEN_POSITION){
		ELEMENT_POSITION.classList.add('active');
	}
}

window.addEventListener('scroll', scrollAppear);

 

 

getBoundingClientRect() 는 window를 기준으로 요소의 위치 값을 가져옵니다.

 

사용 방법

<div class='element'></div>

<script>
	const ELEMENT = document.querySelector('.element');
    console.log(ELEMENT.getBoundingClientRect());
</script>

 

getBoundingClientRect()값 (chrome console)