참고한 블로그 : https://devinus.tistory.com/61
🚀이미지가 스크롤에 따라 left:0에서 left:100%까지 이동하는 프로그래스바
로켓은 스크롤 되는 동안 상단에 고정되며 글자보다 위에 있어야한다.
스크롤 진행도에 따라 이미지의 각도가 변경되었으면 좋겠다!
코드확인
scrollHeight = document.documentElement.scrollHeight - window.innerHeight
전체 웹페이지의 높이 - 브라우저 창의 높이 = scrollHeight로 정의.
scrollHeight는 스크롤 하지 않았을 때 브라우저에 보이지 않는 영역의 높이와 같다.
scrolled = (window.scrollY / scrollHeight)100
(스크롤된영역 / 보이지 않던 영역)100 = scrolled로 정의.
스크롤된px만큼을 scrollHeight로 나눈 뒤 *100을 했다
scrolled는 스크롤 된 비율% 과 같다
scrolled를 progressBar.style.width = scrolled + "%";로 속성값에 입력.
대충 전체 웹페이지의 높이가 1500px 브라우저 높이가1000px라고 치면
scrollHeight=500가 된다.
*scrollHeight는 스크롤될 수 있는 부분의 높이군 즉 이전엔 안보이던 영역의 높이
window.scrollY/scrollHeight에서 100px만큼 스크롤을 내린다면
100/500=0.2*100 =20이고
progressBar.style.width=20%가 된다.
그럼 윈도우 너비가 1920px일때 width가 384px가 된다.
스크롤 된 % 만큼 너비가 늘어난것.
여기서 로켓 이미지를 추가하고 로켓의 rocket.style.left = r_scrolled + "%";으로
로켓의 위치를 left:scrolled%만큼 이동시켜서 같이 이동하는 모양으로 만들었다!
scrolled100%가 되면 창 밖으로 로켓 이미지가 사라지기 때문에
(window.scrollY / scrollHeight)* 95로 벗어나지 않게했다
이번엔 프로그래스바가 로켓 이미지보다 길어져서 튀어나와서
(window.scrollY / scrollHeight) * 98로 로켓 뒤에 가려지게했다
기존 각도 25deg에 스크롤진행도에 따라 각도를 더 주기 위해
const r_deg = (r_scrolled * 0.3) +25; 로 진행도의 0.3 만큼씩 각도를 더 준 다음
rocket.style.rotate = r_deg + "deg"; 각도에 넣어주었다.
