🔔 9일차
오늘은 결론부터 말하면 정말 뿌듯한 하루이다! 못할 줄 알았던 애니메이션 기능을 하루 종일 붙잡고 있었는데 결국 성공했다!!
SVG는 개발 공부를 시작하고 처음 접해봤다. 좌표를 찍어가면서 직접 그렸고, 스크롤을 내릴 때마다 스크롤 위치를 계산해서 그려나아갔다.
너무 안풀려서 포기할까도 생각 많이 했지만, 넣으면 랜딩 페이지가 더 이뻐질껄 알기에 포기할 수가 없었다!
결국 혼자서 해결을 해냈고 정말 뜻깊은 하루가 되었다!!
💪 오늘은 어떻게 프로젝트에 기여했나요?
GIF 파일에는 조금 끊켜보일 수도있지만 내가 그냥 스크롤을 끊으면서 내려간 것 이다.
오늘은 보여줄만한 것이 이거 하나밖에 없지만, 그래도 팀원들과 코드리뷰 시간에 칭찬을 많이 받아서 정말 기쁘다 ㅜㅜ
🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?
안그래도 svg는 처음 접해보는데 타입스크립트까지 적용시키려니 처음에 정말 애를 먹었다.
dom을 사용했는데, svg에 getElementByid로 접근해서 getTotalLength()를 쓸 때는 아무 문제 없었지만, 여러개를 적용시키기 위해 id를 className으로 바꾸고 접근했을 때는 getTotalLength()가 적용되지 않았다. 그래서 조건문을 걸어주니 드디어 해결할 수 있었다.
const svg: HTMLCollectionOf<Element> =
document.getElementsByClassName("rainbowLine");
Array.from(svg).forEach((line) => {
if (line instanceof SVGPathElement) {
const length = line.getTotalLength();
}
});
// ..생략
여기까지 오는데도 고생했지만 지금부터 시작이였다. 지금은 svg의 path에 접근을 한 것 뿐이다. line이 path 태그에 해당한다.
처음 스크롤 위치에 따른 view 거리 계산을 했을 때는,
scrollPercent =
(document.documentElement.scrollTop + document.body.scrollTop) /
(document.documentElement.scrollHeight -
document.documentElement.clientHeight);
strokeDashoffset = length * scrollPercent;
(현재 스크롤위치) / scrollHeight - clientHeight 를 해주고 이 값을 svg 길이에 곱을 해주었다.
이 값은 후에 strokeDashoffest에 할당해주었는데, 내 생각대로 전~~혀 움직이지 않았다.
이때 정말 고민 많이 했던 것 같다… 도저히 감을 못잡고 있을 때였다.
그러다가 조금 더 생각해본 결과, 현재 내가 보여주고 싶은 위치만 필요한거 아닌가? 생각해서 scrollHeight를 빼버리고 퍼센트니까 1을 빼주었다.
height = document.documentElement.clientHeight;
scrollPercent = document.documentElement.scrollTop / height;
strokeDashoffset = length * (1 - scrollPercent);
이렇게 하니 해결이 되었다!! 이걸 하기 위해 오늘 아침부터.. 저녁도 안먹고 밤까지 코딩만….했다 ㅠㅠ 그래도 원하던 기능구현을 해내니 밥을 안먹어도 정말 행복했다..
🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
랜딩 페이지 Part-7 구현