<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.wrap{
width: 100%;
}
.line{
width: 500px;
height:auto;
}
.line path{
fill:none;
stroke:pink;
stroke-width:1;
stroke-dasharray: 1136;
stroke-dashoffset: 0;
animation-name:dashline;
animation-duration:3s;
}
/* svg animation */
@keyframes dashline {
0%{stroke-dashoffset: 1136;}
100%{stroke-dashoffset: 0;}
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="wrap">
<svg class="line" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 325.32 417.72" style="enable-background:new 0 0 325.32 417.72;" xml:space="preserve">
<path class="st0" d="M41.77,24.05c0,0,167.09-46.84,215.19,30.38s48.1,169.62-30.38,201.27S66.31,216.55,72.15,184.81
c8.86-48.1,89.87-70.89,136.71-43.04s70.78,65.66,79.75,121.52c3.46,21.58-29.11,130.38-83.54,130.38"/>
</svg>
</div>
<!-- query -->
<script>
$(function(){
$('.line').find('path').each(function(i,path){
var length = path.getTotalLength();
// alert(length);
});
});
</script>
</body>
</html>
* 적용방법:
일러스트 프로그램에서 저장방식을 svg로 저장 -> 코드 복사해서 붙여 넣기.
* 주의
일러스트 프로그램이 한국어패치가 되어있다면 html lang="ko"로 바꿔주어야 인식이 된다.
참고
HTML에 SVG 파일 추가하여 움직이는 애니메이션 구현
오랜만에 포트폴리오 포스팅을 하네요 :) 오늘은 저의 두번째 포트폴리오 메인에 사용된 디자인을 같이 구현해볼까합니다. 먼저 한번 완성작을 같이 보시죠 해당 완성작은 웹페이지에서 작동하
chpofo.tistory.com
'Javascript > jQuery' 카테고리의 다른 글
| [javascript]jquery 코드 변환 (0) | 2023.02.20 |
|---|---|
| scroller Trigger 사용법 참고페이지 (0) | 2022.11.24 |
| swiper갤러리 (0) | 2022.11.22 |
| swiper.js 사용법 (0) | 2022.11.22 |
| scroll시 header 변화 (0) | 2022.11.22 |