-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.
23.10.17 15:37 작성 조회수 210
0
안녕하세요,
유익하고 좋은 강좌 만들어주셔서 감사드립니다! 덕분에 브라우저 스크롤 애니메이션에 대한 개념이해를 갖게 됐습니다!. 이런 내용을 바탕으로 '미려한' 애니메이션을 만들고 싶은 욕심이 생겼는데요,
해당 강좌를 시청하며 2가지 문의사항이 있습니다.
감사합니다!
#질문1. svg의 path의 생성하는 법, 만들어주신 강좌 중 svg 강의를 보면 아이디어를 얻을 수 있을까요?
보너스로 추가해주신 아이패드 강좌 부분을 보면서, svg의 path를 커스텀으로 만들고 싶은 생각이 들었습니다. 아직 svg 로딩 강좌 섹션은 보지 못했는데, 혹시 인터렉티브 로드맵 중 svg강좌를 들으면, path를 만들 수 있는 힌트를 얻을 수 있을까요? 예를 들어 '안녕하세요 반갑습니다' 라는 svg를 브라우저 스크롤 하면서 하나씩 그려내고 싶습니다.
#질문2. 3번째 섹션, 이미지프레임과 fixed된 텍스트들을 서로 싱크를 맞추려면, 어떻게 한땀한땀 해야할까요?
강좌에서 공부한 스크립트와 마크업/스타일을 바탕으로, 새로운 애니메이션을 만들때, 이미지/비디오 프레임과 fixed된 텍스트를 서로 싱크 맞추는 요령? 방법?이 무엇이 있을까요? 혹시 이미지 애니메이션을 완성하고, 수작업으로 텍스트의 fixed위치를 변경하면서, 수치를 정하는건가요?
답변을 작성해보세요.
0
1분코딩
지식공유자2023.11.02
SVG 패스를 코드로 직접 만드는 것 보다는, 툴을 사용하시는게 좋습니다. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths 이런 문서들의 내용을 바탕으로 코드로 만들 수도 있겠지만, 정말 시간이 오래 걸릴거라서요^^; 저는 어도비 구독을 하고 있어서 일러스트레이터를 이용하는데요, 그 외에도 SVG Path를 만들 수 있는 도구들이 있으니 검색해 보시고 적절한걸 선택하시면 될 것 같습니다. "svg path generator"라고 검색해보니 이것저것 나오네요~
이미지 프레임과 텍스트들은 어떤 연관성이 있는게 아니기 때문에, 직접 확인 하시면서 위치와 타이밍을 수정하셔야 합니다. 어쩔 수 없이 어느정도 노가다가 필요한 작업이랍니다.
0
인프런 AI 인턴
2023.10.19
안녕하세요 프린이님, 인프런 AI 인턴이에요.
질문1에 대해서는 저희 인프런의 로드맵에서 svg 강의를 수강하시면, path를 만들 수 있는 힌트와 아이디어를 얻을 수 있습니다. 언급하신대로 로드맵 중 인터렉티브 로드맵에서 svg 강의를 찾아보시면 도움이 될 것입니다. 브라우저 스크롤을 이용하여 ‘안녕하세요 반갑습니다’라는 svg를 하나씩 그려내는 것도 가능합니다.
질문2에 대해서는 이미지 프레임과 fixed된 텍스트를 서로 싱크 맞추려면 스크립트와 마크업/스타일을 이용해 조정해야 합니다. 이미지 애니메이션을 완성한 후, 텍스트의 fixed 위치를 변경하며 수치를 조정하는 방법으로 원하는 싱크를 맞출 수 있습니다. 수작업으로 조정하는 것이 가장 일반적인 방법 중 하나입니다.
이 점들을 참고하시면 미려한 애니메이션을 구현하는 데 도움이 되실 것입니다. 감사합니다!
답변 2