[SVG] svg stroke animate

CSS 사용버전 ▼

https://jsfiddle.net/Kimara/v7snm2wf/

svg stroke - JSFiddle

 

 

 

플러그인 사용버전 ▼

https://jsfiddle.net/Kimara/90x5qb74/7/

Edit fiddle - JSFiddle

 

 

 

SVG를 이용해서 stroke 애니메이션 효과를 주었다!!

CSS로 구현 가능하지만 IE에서 작용이 안되는 단점이 있다.ㅠㅠ

IE를 버리지 않는 이상 animate효과를 크롬에서만 볼 수 있다는 뜻인데.. 하지만 세상엔 천재들이 많고요?

구글을 뒤지니 역시 제이쿼리 플러그인이 있다!

내가 쓴건 jQuery DrawSVG 플러그인 인데, 이건 윈도우 스크롤을 할때 애니메이션이 발생하게 할수도 있고,

처음부터 애니메이션을 줄수도 있다!!

 

 

 

 

 

 

 

 

- 참고 url
https://www.youtube.com/watch?v=y0Ic8QcvyK8
https://css-tricks.com/svg-line-animation-works/

http://leocs.me/jquery-drawsvg/