[SUB]mastering svg scroll animation effect with javascript

[@castle_h_95]

이번에도 너무 좋은강의 감사합니다 😊 지금까지 svg 파일은 이미지태그에 넣어서 깨지지않는 이미지 정도로만 활용했었는데.. path활용하는 방법을 알게되어서 너무 행복합니다😀😀

[@yummycoding]

안녕하세요 성혁님 이번에도 부족한 제 영상이 도움이 되셨다니 너무 기쁘네요^^ 요즘 해외에서 canvas와 svg가 주요 프론트엔드 기술로 자리잡고 있는 추세라 저도 많이 공부하면서 영상을 만들고 있습니다 :) 앞으로 관련하여 재밌는 프로젝트를 많이 진행할 예정이니 많은 관심부탁드리겠습니다 ^^

[@Uzer_0.1]

6:30 6:56 7:25

[@rgeorge7846]

좋은 아이디어와 바로바로 구현하시는 모습 멋집니다 한 수 배워갑니다~! 앞으로도 빠이팅입니다!

[@yummycoding]

힘이 나는 댓글 감사드립니다 ^^^ 더 유익한 영상으로 찾아뵐 수 있도록 최선을 다해보겠습니다 :D 같이 빠이팅해요!!

[@타임투두]

오 이런거 너무 궁금했는데 감사해요 영상 많이 많이 올려주세요

[@yummycoding]

많이 올려서 타임투두님께 도움이 될 수 있도록 최선을 다해보겠습니다^^ 감사합니다 :D

[@yEppiPopPy]

코린둥절... 코린이는 그저 감탄사만 연발중입니다....

[@yummycoding]

부족하지만 영상이 유익하셨으면 좋겠습니다 :) 이 영상 외에도 더 재밌는 튜토리얼들이 많이 있으니 많은 관심 부탁드리겠습니다 ^^!

[@진영-x4o]

와... 진짜 지려따... 바로 구독하고 갑니다...

[@yummycoding]

구독 너무너무 감사드립니다 😁 다른 영상도 프론트엔드에게 유용한 콘텐츠가 많으니 많은 관심 부탁드릴게요 ㅎㅎ

[@9diin]

우와 최근에 관심 갖던 부분이었는데 좋은 정보 알려주셔서 감사합니다 ㅎㅎ 저도 다음 콘텐츠를 위해 공부하고 만들어봐야겠어요!

[@yummycoding]

제 영상이 조금이나마 도움이 되셨으면 정말 좋겠네요 ㅎㅎ 앞으로도 등 가려운 부분 시원하게 긁어드릴 수 있도록 최선을 다하겠습니다😁

[@9diin]

@@yummycoding 저도 도움이 될 수 있는 개발자가 되도록 노력할게요 ☺️

[@rosie-aah]

정말로 너무나 쉽고 알아듣기 좋게 설명해주시네요 ㅠㅠ 도움이 진짜 많이됩니다 감사합니다 🥹👍

[@껄껄컬껄]

계속 찾고있었는데 유익한 정보 너무 감사합니다

[@yummycoding]

도움이 되셨다니 너무 기쁘네요^^ 재밌는 컨셉의 튜토리얼들이 많이 있으니 많은 관심 부탁드리겠습니다 :)

[@oomgworld]

정말 꼭 알고싶은 내용이었습니다! 감사합니다 ㅜㅜ

[@yummycoding]

긴 동영상 시청해주셔서 감사드립니다! 더좋은 영상으로 찾아뵐 수 있도록 최선을 다하겠습니다 :)

[@박수진-f8m]

와,,,꼭 해보겠습니다 좋은 강의 감사합니다~

[@yummycoding]

네 감사합니다^^^ 보시다가 이해가 안되시는 부분있으면 여쭤보시면 알려드릴게요 :)

[@ironship]

스크롤 애니메이션 웹사이트를 보고 프론트엔드 개발자 준비를 시작했는데 svg path 활용해서 포트폴리오 만들어서 얼른 취업하고 싶어졌네요. 쉬운 설명 감사합니다 !!! 추가로 path 디자인은 어도비 일러스트 활용해서 디자인 하신 건가요? 미리 전체 y값을 생각해놓고 디자인하는건지.. 완전 초보라 어떤식으로 시작해야할지 방향만 잡아주심 감사하겠습니다. + 생각해보니 path만 디자인할게 아니라 네비게이션이라든지 푸터라든지 전체적으로 디자인해야 조화로운 디자인을 완성할 수 있겠다는 생각이 드네요.

[@yummycoding]

네 맞아요 잘이해하신 것 같습니다 :) 패스를 먼저 그리고 dom 요소들로 디자인을 하다보면 길이에 문제가 생길 수도 있어 먼저 전체적인 디자인을 짠 후 작업하시거나 부분부분적으로 svg path 애니메이션을 적용하면 큰 길이 y를 고려하지않고도 작업하실 수 있습니다. 반응형으로 작업을 하고계신다면 모바일 태블릿 pc용으로 각각 path를 디자인하는것도 추천드리는 방법이에요..! 더 궁금한점이 있으시면 여쭤보시면 알려드리겠습니다 ^^ 추가적으로 추후에 스크롤애니메이션을 시리즈로 묶어서 연재할 계획이 있으니 앞으로도 많은 관심 부탁드리겠습니다 ^^

[@rerefe]

항상 이런 부분에 대해 구현해봐야겠다는 생각을 했었는데, 좋은 내용 감사합니다! 애플 홈페이지나 이런 곳에서 보면 스크롤에 따라 여러 애니메이션이 작동되는 모습을 봤었는데 같은 내용인가요?

[@yummycoding]

안녕하세요 oWHENo님! 늦은 답변 죄송합니다^^ 같은 scroll 이벤트를 통해 작동이 되는데 어떻게 함수화나 클래스화해서 사용하는지는 사람마다 다르긴 하나 기본적인 원리만 보면 같은 내용이라고 볼 수 있습니다 :)) 나중에 스크롤 관련하여 더 많은 컨텐츠 준비해서 찾아뵙도록 할테니 많은 관심 부탁드립니다 ㅎㅎ

[@jinwoohong1862]

03:30초에 나누는 것이 너무 이해가 안되는데 왜 나누게 되었는지 한번만 더 설명해주실 수 있을까요? + ratio도 궁금합니다 ㅠㅠㅠ

[@yummycoding]

안녕하세요 Jinwoo Hong님! 다시한번 알려드리겠습니다 :) 우선 ratio가 0부터 1까지 나오는 이유를 아셔야하는데요 ratio를 진행도라고 생각하시면 됩니다 진행도가 0일때는 그림이 아무것도 안그려져있다가 진행도가 1일때 그림이 전부 그려져야합니다 스크롤(window.scrollY)만 변하는 값이고 내 화면의 높이(window.innerHeight), 그림의 총 길이(div.offsetTop), 그림의 시작지점부터 맨위까지 길이(div.offsetTop) 이 나머지 세가지는 고정된 값입니다. 따라서 스크롤값을 통해 진행도를 0부터 1까지를 구하기위한 것인데요 분모로 그림.offsetHeight을 사용하는 이유는 진행도가 0일때부터 진행도가 1일때까지 사이의 총 길이이기 때문입니다 그림의 전체 길이를 분모로 두고 위처럼 계산된 값이 분자일때 분자가 0부터 그림의 전체 길이가 되어야 진행도(ratio)가 0부터 1까지 나오는 것이죠 3:08에서 그림의 시작되는 지점은 진행도가 0, 즉 그림이 그려지기 시작하는 지점인데요 scrollY와 innerHeight를 더한 값이 그림.offsetTop 값과 일치하게 되니 빼주면 진행도를 0으로 나오게 할 수 있는것을 확인하실 수 있습니다 3:30에서 그림의 끝나는 지점은 진행도가 1, 즉 그림이 막 다그려지는 지점인데요 scrollY와 innerHeight를 더한 값이 div.offsetTop + div.offsetHeight을 더한값과 일치하시는것을 그림으로 확인하실 수 있습니다 따라서 진행도 0일때와 똑같은 공식으로 w.innerHeight를 w.scrollY와 더한 값에서 그림.offsetTop 값을 빼주면 그림.offsetHeight값과 일치하게 되니까 분모로 나눠주면 1이 나오게 되는거죠 따라서 (w.scrollY + w.innerHeight) - 그림.offsetTop을 그림.offsetTop으로 나눠주는 공식이 그림을 그리기위한 진행도 0부터 1까지를 구하기 위한 공식인 것입니다 제가 설명을 깔끔하게 하지 못해 헤메신것 같아 죄송하네요ㅠㅠ 한번 위에 설명드린걸로 다시한번 이해해보시고 모르시는것 또여쭤봐주시면 자세하게 설명드리겠습니다^^^

[@jinwoohong1862]

@@yummycoding 너무너무 완벽하게 이해가 되었습니다 ㅠㅠㅠㅠㅠㅠ 정말 감사합니다 ㅎㅎ

[@김사장님-g6t]

정말 좋은 유튜브 같아요 크게 되실 분입니다! 소스코드링크를 깃허브로 주시면 더 좋을것 같아요!

[@yummycoding]

안녕하세요 김사장님! 제가 미처 간과하고 있던 부분인데 미리 이렇게 알려주셔서 너무 감사드립니다ㅎㅎ 모든 동영상 설명란에 깃헙 소스코드 링크 전부 달아놓았으니 필요하시면 확인해서 쓰실 수 있습니다 :) 보자마자 행복해지는 댓글을 주셔서 감사합니다ㅎㅎ 더욱더 멋진 코드로 찾아뵐테니 꾸준한 관심 부탁드릴게요^^

[@mango._.00r]

안녕하십니까 영상이 많이 도움 되었고 새로운 정보를 알려주셔서 감사합니다. 최근에 회사에 신입으로 입사를 하였다가 조그만 프로젝트를 진행중에 이 영상을 참고해서 홈페이지를 만들었다가 채택이 되어서 공식사이트에 사용하게 되었는데 소스 코드나 svg를 사용해도 될까요? svg는 조금 변형해서 사용하겠습니다

[@냠-u2f]

일러스트에서 path를딴다음에 svg로 저장하는게 너무 어렵네여..ㅋㅋㅋ 기존 배경은 지워야 하는 건가요? 새로운 path 배경 투명도는 원래데로 바꿔야 되나요? 기초적인 질문 죄송합니다..

[@윤세희-l6o]

와아 개인 사이트에 꼭써볼게요👍👍

[@yummycoding]

멋진 포트폴리오 웹사이트가 되었으면 좋겠네요 😄😄 소중한 댓글 감사드리고 더 좋은 영상으로 보답할 수 있도록 노력하겠습니다 :)

[@ayexngg]

안녕하세요! 일러로 path그릴때 아트보드 사이즈는 정해진게있나요? 아니면 아무사이즈여도 괜찮을까용?? 이번 강의 진짜 필요했던건데 정말 감사해요ㅜㅜ

[@yummycoding]

안녕하세요 :) 보드 사이즈는 크게 상관은 없는 것 같아요~ 다만 좀더 디테일한 연출이 필요하시면 모바일용따로 (태블릿용따로) 웹용따로 등 사이즈 조절이 필요할 수도 있습니다!

[@시간의연금술사]

원리에 대해서는 어떻게 아시게 되신건가요 ?.. 그냥 참고 사이트 보고 떠오르신건가요 ?? 너무 신기합니다 ㅠㅠ

[@아이폰-1]

몇번 반복해서 해봤는데 스크롤 내릴때 콘솔로 확인하는 것 부터 안되네요 ㅜㅜ 스크롤 내리면 값은 증가하는데 Uncaught ReferenceError: path is not defined 라고 뜹니다 혹시 path.style.strokeDasharray를 선언 해주어야 하나요?

[@yummycoding]

혹시 index.html 에서 script 부분만 댓글로 남겨주실 수 잇을까요~?? 확인해봐드리겠습니다!

[@아이폰-1]

@@yummycoding 감사합니다!!!! path가 실제로 그려지는 위치 설정 전 스크립트 상황입니다 const content1= document.querySelector('.content1') const path1 = document.querySelector('path2') const path1Length = path1.getTotalLength() path.style.strokeDasharray = path1Length path1.style.strokeDashoffset = path1Length function calcDashoffset(scrollY,element,length){ const ratio = (scrollY - element.offsetTop)/element.offsetHeight const value = length - (length*ratio) return value length ? length :value } function scrollHandler(){ const scrollY = window.scrollY + window.innerHeight path1.style.strokeDashoffset = calcDashoffset(scrollY,content1,path1Length) } window.addEventListener('scroll',scrollHandler) 한가지 더 질문이 있습니다 ! 영상 보면 const path2가 아니라 path1을 document.querySelector path2로 지정하는 이유가 무엇인가요?? +시간 내 주셔서 감사합니다 !! 영상 잘 보고 도움이 많이 됩니다 !!

[@yummycoding]

path.style.strokeDasharray = path1Length

[@아이폰-1]

@@yummycoding 설명 너무 너무 감사합니다!! 🤩🤩

[@초코마탄]

그림판으로 선 따서 해도 되는건지 궁금합니다

[@yummycoding]

그림판으로는 안됩니다 ㅠㅠ svg의 path 를 이용하는 것이기 때문에 일러스트 사용을 권장드려요!

[@취풍당당-w7t]

이쁘다

[@yummycoding]

좋게 봐주셔서 감사합니다! ^^