getBoundingRect().top과 offsetTop을 이용한 거리값 계산

캔버스 사이즈 조정

height값 구하기

 

 캔버스의 사이즈를 현재 보고 있는 창 사이즈에 딱 맞게 조정하였고 조정 된 캔버스 기준으로 스크롤 값이 브라우저 창에 맞닿았을 때 설정해 둔 캔버스 애니메이션이 발생할 수 있도록 브라우저 창과 캔버스 이미지 간의 height 값을 getBoundingClientRect().top을 통해 계산하였다.

 

관련 영상

 하지만 원래 의도했던 바와는 달리 캔버스 애니메이션이 제대로 동작하지 않았다.

 이는 getBoundingClientRect().top 값이 일정하게 나오는 것이 아니라 아래 콘솔에 출력해 본 바와 같이 사용자가 스크롤하는 속도에 따라 값이 top의 값이 상시 변화하기 때문이었다.

 이를 위해 요소의 offsetTop을 이용하여 브라우저 창과 캔버스 이미지 간의 height 값에 얻고자 했다.

 offsetTop은 position값이 relative로 설정 된 부모 요소 기준으로 top값을 산출한다. 현재 본 프로젝트에서 캔버스 이미지가 속해 있는 <div>scroll-section</div>에  position  relative 값을 지정해주었다.

 하지만 이 또한 정확한 top값이 산출되지 않은 문제가 발생하여 캔버스 애니메이션이 제대로 동작치 않는 문제가 있었다.

스크롤 영역

 위와 같은 문제는 transform 속성 값의 특성을 반영하지 않았기 때문에 발생 한 문제였다.

 위의 이미지와 같이 본래 캔버스의 이미지 사이즈인 1920*1080을 화면 상에 딱 맞추기 위해 일정 비율로 1280*720으로 transform scale() 속성을 사용하여 줄여 둔 상태이다.

 

 offsetTop을 계산할 때 기준이 되는 캔버스의 사이즈를 재조정 한 사이즈의 것으로 맞추어 브라우저 창 간의 거리를 계산하였다. 하지만 transform으로 위치 이동 및 스케일 조정은 요소의 원래 위치나 크기에 영향을 미치지 않기에, 기본적인 Geometry 상에서 본래 차지하고 있는 공간 영역 자체는 변하지 않은 채 시각적으로 변화만 일어난다.

 

 즉, offsetTop의 계산이 재조정 되기 전에 원래 캔버스 사이즈인 1080 기준으로 offsetTop으로 계산되면서 브라우저 창 간의 거리 계산을 제대로 반영하지 못한 것이다.

 

 이를 해결하기 위해 기존 offsetTop 값에 (원래 캔버스 사이즈 - 재조정 된 캔버스 사이즈) / 2의 값을 추가적으로 더해 주어, 현재 화면 상에 보이는 캔버스의 사이즈에 맞는 브라우저 창 간의 거리를 계산해주었다.

 

관련 영상