JavaScript 스크롤 정도에 비례한 애니메이션 효과

먼저 내장 함수 offsetTop을 사용하여 요소의 Y축 상대 위치 값을 불러온다. 다음으로 내장 함수 window.pageYOffSet을 사용하여 웹 페이지가 세로 방향으로 스크롤 된 px값을 불러온다.

값들이 정확하게 준비가 되었다면, 전체 웹 페이지의 세로 길이를 구한 다음 스크롤 된 값을 아래 scrollPer와 같은 식에 대입하여 세로 방향으로 스크롤 된 정도의 퍼센트 값을 구한다.

예시로 Out, Fade out 효과를 사용했다. Out 효과를 줄 요소는 스크롤이 시작되면 투명도를 0으로 지정하여 Out 처리하고 Fade out 효과를 줄 요소는 스크롤 된 정도의 퍼센트 값에 반비례하는 투명도를 동적으로 지정하여 스크롤 될수록 요소의 위치는 sticky로 고정한 후 Fade out 처리한다.

var contents = document.getElementsByClassName("Fade out 효과를 줄 요소");
function fadeOutOnScroll(element){
	if(!element){
		return;
	}
	var contents2 = document.getElementsByClassName("Out 효과를 줄 요소");
	var distanceToTop = element[0].offsetTop; // 상대 위치
	var scrollTop = window.pageYOffset; // 스크롤 정도

	if(scrollTop >= distanceToTop){
		element[0].style.position = "sticky";
		element[0].style.top = 0;
	}
		
	var scrollPer = (scrollTop / (document.documentElement.scrollHeight - window.innerHeight) * 100).toFixed(0); //스크롤 된 정도의 퍼센트 값
		
	if(scrollPer == 0){
		contents2[0].style.opacity = 1;
		element[0].style.opacity = 1;
	}else{
		contents2[0].style.opacity = 0;
		element[0].style.opacity = (50 - scrollPer) / 100;
	}
}

function scrollHandler(){
	fadeOutOnScroll(contents);
}

window.addEventListener("scroll", scrollHandler);