SVG path text animation in 8 minutes with JavaScript

Поділитися
Вставка
  • Опубліковано 5 лют 2025

КОМЕНТАРІ • 38

  • @oomgworld
    @oomgworld 2 роки тому +1

    내일 꼭 해봐야지❤

  • @lloolljoon
    @lloolljoon 2 роки тому +2

    으악짜릿해 ! 이런거 하나하나 만들어가는 재미 느낄때마다 너무 재미써요 ㅠㅠㅠㅠ 좋은 영상 감사드립니ㅏㄷ 구독 씨게박고가요

    • @yummycoding
      @yummycoding  Рік тому

      힘이 되는 댓글 너무너무 감사드려요~ 더 좋은 영상으로 찾아뵙겠습니다 😄

  • @풍류-w8z
    @풍류-w8z Рік тому

    훌륭한 강의 고맙습니다

  • @소야블리
    @소야블리 Рік тому +1

    독학을 하고 있는 학생입니다. 조금 헤매면서했지만~ 성공했네요! 좋은 강의 감사합니다.

    • @yummycoding
      @yummycoding  Рік тому

      힘이 되는 댓글 너무 감사합니다 :)) 오전에 강의 올라올 예정이니 많은 관심 부탁드릴게요 :D

  • @mj-dh3th
    @mj-dh3th 2 роки тому +1

    우와 좋은 정보 쉽게 올려주셔서 감사합니다 ! 정말 필요했던 애니메이션인데 어떻게 구현할지 고민하던 차에 이 영상으로 해결되었습니다 감사합니다 !

    • @yummycoding
      @yummycoding  Рік тому

      해결하셨다는게 너무 뿌듯하네요 ㅎㅎ 다른 영상에서도 도움이 되실 수 있도록 최선을 다하겠습니다 😊

  • @hello-1024-wellcome
    @hello-1024-wellcome Рік тому +1

    감사합니다 선생님!

  • @onlyypa7532
    @onlyypa7532 2 роки тому +1

    이번 영상도 너무 멋지십니다~! ㅎㅎㅎ

    • @yummycoding
      @yummycoding  2 роки тому

      이번 영상도 조금이나마 도움이 되셨기를 바랍니다😊😊😊

  • @tahookideveloper3338
    @tahookideveloper3338 2 роки тому +1

    요 영상 하나로 구독과 좋아요 바로 눌렀습니다. 영상감사합니다 기존 영상들도 모두 보고 학습하도록 하겠습니다 😊

    • @yummycoding
      @yummycoding  2 роки тому

      구독과 좋아요를 동시에 주셨다니 너무 영광스럽네요!:) 더 좋은 컨텐츠를 고민하고 연구해야겠다는 사명감이 생기네요 감사합니다😊

  • @김태균-d6t9d
    @김태균-d6t9d 2 роки тому +1

    오… 구독해두고 하나씩 보고 있는데 되게 유익하네요 ㅎㅎㅎ
    자주 보러 올게요!!

    • @yummycoding
      @yummycoding  2 роки тому

      힘이 되는 댓글 주셔서 너무너무 감사드립니다 :)
      구독 감사드리고 더 좋은 컨텐츠로 찾아뵐 수 있도록 노력하겠습니다😄😄

  • @김사장님-g6t
    @김사장님-g6t 2 роки тому +1

    감사합니다!

    • @yummycoding
      @yummycoding  2 роки тому

      제가 더 감사합니다~!
      이번 영상도 도움이 되셨기를 바라겠습니다 ^^^

  • @ganghui
    @ganghui 3 дні тому

    안녕하세요 path 말고 line으로 뜨는건 화면에 안나타나는데 어떻게 해결해야 할까요 ㅜㅜㅜ?

  • @홈카페아님
    @홈카페아님 6 місяців тому

    곡률도구 사용하는게 어렵습니다 ㅜㅜ

  • @FreetySunWoo
    @FreetySunWoo 2 роки тому +2

    정말 유용한 정보를 아낌없이 주셔서 감사합니다~! 볼때마다 감탄을 하면서 하나하나 배워보고 있습니다~!!
    혹시 그리기 상자 이런것도 캔버스로 구현이 가능한가요??

    • @yummycoding
      @yummycoding  2 роки тому +1

      항상 힘이되는 댓글 감사드립니다 ^^^
      그리기 상자는 어떤것을 말씀하시는지 제가 정확히 이해가 잘안되네요..! 혹시 연필 붓 이런 도구를 말씀하시는건지 아니면 사각형도구를 말씀하시는 건가요???

    • @FreetySunWoo
      @FreetySunWoo 2 роки тому +1

      @@yummycoding 답변 감사드립니다~! 말그대로 글씨를 쓸 수도 있고, 도형을 그릴 수 있고 해당 도형에 이미지나 영상을 넣는 프로그램도 좋은 배움의 자료가 될까해서요~!! 항상 창의적인 수업에 감탄하고 있습니다!! 감사합니다!

    • @yummycoding
      @yummycoding  2 роки тому +1

      단순히 펜으로 그리듯이 드로잉 하는부분은 쉽게 구현이 될텐데 도형을 넣고 만든 도형을 셀렉트 해서 리사이징하고 로테이트하고 하는 부분들 디테일이 들어가면 영상이 복잡해져서 유튜브 시리즈로는 고민이 되는 부분이지만 좋은 아이디어 감사합니다! 나중에 기회가 된다면 한번 고려할 수 있도록 할게요! 저도 다른 유튜버 분들처럼 인프런 같은 곳에서 시리즈 강의를 올려야 하나 말씀듣고나니 고민을 하게 되네요 ㅎㅎ 항상 힘이 되는 댓글 주셔서 감사드립니다

  • @김히히-g2p
    @김히히-g2p 2 роки тому +1

    맛코님 덕에 하나씩 해결하는 재미가 엄청납니다 :D 문제가 생겼는데 아이폰에서는 defs 내의 clipPath 형태를 클리핑하지 못하는 것 같아요ㅠㅠ 안드로이드나 피씨에서는 괜찮은데 문제가 뭘까요?? 해결하려면 어떤 추가 메서드를 써줘야하나요?!!!!ㅠㅠ

    • @yummycoding
      @yummycoding  Рік тому

      codepen.io/rudtjd2548/details/Barpjev 해당 링크에서도 아이폰에서 동작이 안되실까요..?! 혹시 잘되신다면 해당 pen을 fork해서 수정해나가보시는 것을 추천드립니다!

  • @ilco-wx5lb
    @ilco-wx5lb 2 роки тому +1

    우마이!! 우마이!!

  • @오두막-i5o
    @오두막-i5o 2 роки тому +1

    안녕하세요 선생님 3분41초부분은 어떻게 하는지 전혀보르겠네용.... 하나씩 지웠다가 복사하면 자꾸 이상한곳으로 붙여넣기가 되기도하구ㅠㅠ

    • @lloolljoon
      @lloolljoon 2 роки тому

      제자리에복붙! 컨c, 컨f 이용해보세여

    • @yummycoding
      @yummycoding  Рік тому +1

      안녕하세요 오두막님 이미 해결하셨겠지만 늦은 답변 사과드립니다..!
      해당 영상에서 사용한 방법은 ctrl + x 먼저 해서 잘라내기 후, ctrl + shift + v 로 원래 있던 자리에 붙여넣기를 하였습니다!
      해당 부분에 대한 단축키 설명이 없는 점이 제가 미흡했네요 ㅠㅠ

    • @오두막-i5o
      @오두막-i5o Рік тому

      @@yummycoding 아니에요 답변 감사합니다!! 👍

  • @lloolljoon
    @lloolljoon 2 роки тому +1

    내용이 길어지다보니 svg 코드를 html내에 작성하기엔 수백줄이라 어렵구 img로 첨부해서 하고싶은데 그 방법으로는 어떻게 해야할까요 ? ㅠㅠ

    • @yummycoding
      @yummycoding  Рік тому

      svg 안의 path 요소에 접근을 해서 애니메이션을 해야하기 때문에 img 에 넣어서 사용할 수는 없습니다 😥😥

  • @herssshey1514
    @herssshey1514 Рік тому

    제가 코린이라 질문이 너무 1차원적일 수 있는데,
    svg 로 글씨를 쓰거나 ( 이미지를 그린다거나 ? ) 할 때, 저렇게 path 코드가 길어지는건 어쩔 수 없는거겠죠? ㅠㅠ
    만들면 뿌듯하긴 한데, 코드를 보면 괜찮나 싶을때가 있어서요.. ㅠㅠ 궁금합니다 ㅠㅠ

    • @yummycoding
      @yummycoding  Рік тому

      Path 코드 길어지는 부분은 어쩔 수 없는 부분이라 걱정하시지 않으셔도 됩니다 ㅎㅎ
      긴 코드에 대해 고민하시는 모습이 찐 개발자의 피가 흐르시나 보네요 :)
      앞으로도 강의 올라올 예정이니 많은 관심 부탁드릴게요 :D

  • @포첵
    @포첵 2 роки тому +1

    선생님 혹시 ua-cam.com/video/cpEeqACsF_Q/v-deo.html 여기 10분에 나오는 글자가 비처럼 내리고 와이핑 하는것도 강의영상에 올려주실수 있을까요? 어디 물어볼만한데가 없어서요 메일이나 연락처가 안보여 남겨봅니다..

    • @yummycoding
      @yummycoding  2 роки тому +1

      안녕하세요 포첵님! 현재 계획하는 콘텐츠들이 좀 있어서 기간은 정확히 말씀을 드릴 순 없습니다만 시간이 남을때 틈틈이 분석해서 가능하다면 진행할 수 있도록 노력은 해보도록 하겠습니다…! 제 채널에 관심을 가져주셔서 너무너무 감사드립니다 :)

    • @포첵
      @포첵 2 роки тому +1

      @@yummycoding헛 댓글 감사합니다 앞으로 일정이 잘 풀려서 꼭 진행 됐으면 정말 좋겠어요 ㅠ