자바스크립트(Java Script) study1

원하는 Box 일정 부분 아래로 스크롤시 투명하게 처리하기

const box = document.querySelector('.box_container');

• html의 box_container를 box로 정의한다

const boxHeight = box.offsetHeight;

• box만의 높이를 구한다

document.addEventListener('scroll', () => {
box.style.opacity = 1 - window.scrollY / boxHeight;
});

addEventListener를 이용해 box의 스타일 중 opacity가 전체 높이 중 Y축의 값 / box 높이를 이용해 아래로 내려갈 수록 Opacity가 옅어지도록 만든다

offsetHeight 페이지
https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/offsetHeight