[JavaScript] svg path 스크롤 애니메이션(2)

[JavaScript] svg path 스크롤 애니메이션(1) - stroke-dasharray, stroke-dashoffset

 

해당 포스팅은 유튜브에 업로드된 '맛있는 코딩'님의 강좌를 들으며 공부한 내용들입니다.

👉 맛있는 코딩 강좌 바로가기

 

 

path 그리는 방법

구글 사진 검색에서 다음과 같이 ex) one path drawing 검색하면 다양한 이미지가 나온다.

그중 마음에 드는 이미지를 일러스트로 불러온다.

이미지 배경에 opacity를 넣어준 다음 새 레이어를 만들어서 path툴로 끊기지 않게 하나의 라인으로 똑같이 그려주고 svg파일로 저장한다.

 

 

기본적인 레이아웃

.header {
  padding-top: 110px;
  background-color: #000;
  box-sizing: border-box;
  overflow: hidden;
}

.path {
  fill: none;
  stroke: #f2f2f2;
  stroke-width: 3px;
}

.path2 {
  stroke: #000;
}

.footer {
  height: 30vh;
  background-color: #000;
}

<div class="header">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 758">
      <path class="path path1" d="M220.54,84.4c.3-5.06.05-14.81-6-24-9.34-14.2-28.11-20.39-42-16-2.62.83-10.54,3.33-12,9-.85,3.33,1,5.9,8,21,3.21,6.91,4.15,9.24,3,11-1.45,2.2-5.33,2.16-13,2-9.19-.2-12-1.5-13,0-1.65,2.46,2.87,10.55,10,14,6.77,3.27,10.14-.41,17,3,6.6,3.28,5.37,7.62,11,10,6.33,2.68,9.45-2.15,23-4,12.22-1.67,18,1.12,21-3a9.2,9.2,0,0,0,0-10c-6-8.71-30.92-3-31,0,0,1.46,5.89,3.38,7,2,1.23-1.53-3.84-6.64-10-16-6-9.07-4.7-11.7-9-16-5-5-13.9-9.52-17-7-6.84,5.57,12.62,46.7,24,45,5.93-.89,5.57-12.8,16-18a23.86,23.86,0,0,1,21,0c6.59,3.45,9.12,9.71,12,16,6.32,13.79,14.24,31.06,26,43,13.33,13.54,31.08,19.69,32,20,12.21,4.1,18.42,2.75,24,9,8,8.92,7.37,25.21,2,28-3.86,2-7.49-4.38-13-3-9.92,2.49-7.3,25.55-18,30-4.76,2-9.64-.77-19-6-10.34-5.78-11.49-9.11-37-37-4.18-4.57-8.07-8.77-7-13,.87-3.44,4.91-5.29,13-9s12.11-5.49,16-4c3.74,1.43,7.47,5.44,7,9-.14,1.07-.8,3.17-16,11-4.47,2.3-4.43,2.13-8,4-11.69,6.12-12.23,8-15,8-7.56-.09-13.23-14.45-17-24-7-17.8-3.64-21.88-11-36-4.76-9.14-8.16-11.24-7-15,3.06-9.89,32-12.71,36-5,2,3.93-3.88,7.71-7,19-2.61,9.45-1.27,17,1,29,2.24,11.83,5,26.44,15,43,8.36,13.84,18.91,22.23,40,39,10,7.95,14,10.07,18,9,10.06-2.67,16.63-24.22,19-32,1.65-5.4,2.86-11,5-11s3.81,5.94,5,9c5.39,13.84,23.12,19.58,43,26,23.32,7.53,42.14,8,55,7,20.7-1.6,26.43-7,29-11,2-3.1.61-4.81,3-13s4.8-11.1,7-17c3.77-10.11,5.64-21.78,3-23-1.45-.67-3,2.39-8,5-6.28,3.27-14.86,4.19-16,2-2.37-4.57,25.89-25.71,30-22,1.72,1.55-2.17,6.19,0,9,3.83,4.94,17.93-6.78,29-1,6.7,3.5,7.27,10.79,16,13,2.23.56,4.76,1.2,7,0,6.77-3.64,6-21.58-1-34-2.17-3.84-6.95-12.27-17-15a25.78,25.78,0,0,0-18,2c-10.71,5.44-14.84,18.41-14,19,.51.35,4-2.94,6-7,2.33-4.78,1.69-8.9,1-16-1.64-16.79-.15-15.11-2-28a118.28,118.28,0,0,0-3-16c-2.32-8.49-4.41-16.14-10-23-5.37-6.6-11.35-9.26-22-14-7.49-3.34-16.58-7.39-29-8-7.94-.39-14.29,1.07-27,4-16.5,3.8-24.75,5.7-31,10-10.83,7.45-14.68,18.6-20,33a116.57,116.57,0,0,0-7,34c-1,17.41-1.57,28.57,5,39,8.6,13.64,24.23,17.66,45,23,10.32,2.65,18.33,4.62,29,3,6-.92,21.38-3,30-15,3.31-4.63,4.21-9.08,6-18,.75-3.75,3.53-18.67,0-39-1.49-8.6-2.24-12.9-5-18-6.69-12.36-18.13-17.72-23-20-14.16-6.64-26.93-5.63-35-5-8.77.69-21.64,1.7-33,11a46.55,46.55,0,0,0-9,10c-14.28,21.32-3.86,43.72-1,92a23.81,23.81,0,0,0,2,9c4.1,9,14.1,14.21,35,19,32.3,7.41,48.45,11.11,65,4,7.35-3.16,23.46-10.08,33-26,3.92-6.55,5.87-13.18,12-15,5.3-1.58,10.67,1.34,20,8,23.86,17,35.78,25.51,36,36,.21,10.31-7.25,19.38-14,24-7.07,4.84-18,8-20,5-2.91-4.32,10.42-24.94,25-24,10.32.66,16.48,11.82,21,20,7.82,14.15,15.94,41.08,4,53-9.8,9.78-23.29-.37-35,11-10.19,9.9-9.15,26.53-7,34,.51,1.76,1.65,5.57,4,6,3.31.6,7.26-5.81,8-7,3.14-5.09,2.71-8.27,5-9s5.52,1.3,7,4c2.87,5.25-3.09,9.68-2,17,1,6.86,7.91,14,15,14,8.18.05,13.47-9.3,15-12,7.14-12.61,3-26.71,0-37-2.37-8.11-3.56-12.16-7-14-9.09-4.86-19.48,10-31,6-3.35-1.17-4.73-3.21-16-21-5.42-8.56-5.55-14.74-12-19-4.33-2.86-5.14-1.09-10-4-8-4.78-7.18-10.4-16-18-2.7-2.32-9-7.77-12-6-3.2,1.89-3.2,12.44,3,17,2.82,2.07,5.25.74,13,1,8.13.27,13.38.46,17,3,6.14,4.31,6,14.31,6,19-.66,73.66-1,110.48,0,114a11.12,11.12,0,0,1,0,7c-1.55,4.09-5.89,6.18-11,8a90.06,90.06,0,0,1-34,5c-10.55-.51-15.83-.76-18-4-3.45-5.15,1.78-13.06,9-28,3.87-8,12.28-25.42,16-40,4.41-17.3,2.4-31.31,0-48-4.12-28.66-14.42-50.19-15-50s6.8,15.2,10,38c5,35.74-3.82,63.4-8,76-5.05,15.23-13.54,33.91-17,33-1.91-.5-.24-6.42-2-14-4.63-19.94-29-34.07-50-37-9.75-1.36-23.44-1-24,2-.69,3.67,18.08,15.47,36,10,16-4.89,22.19-20.79,23-23a68.19,68.19,0,0,0-14-55c-16-19.69-29.11-11.83-56-34-7.18-5.92-12.41-11.56-18-10-3.8,1.06-6.71,5.16-11,20-5.16,17.86-4.32,23.29-8,39-6.57,28.1-14.78,34.52-19,37-2.21,1.3-8,4.25-9,3-1.31-1.65,4.87-11.48,12-12,5.68-.41,9.47,5.27,15,11,12.43,12.88,26.26,18.35,38,23,17.75,7,19.09.73,38,7,10.23,3.39,31,10.28,40,29,6.86,14.28,6.58,34.87-3,41-2.86,1.83-6.51,2.35-26-3-29.87-8.2-33-12.62-44-12-16.15.91-33.65,11.73-34,22-.38,11.14,19.66,14.76,19,28-.25,5.1-3.67,13.42-8,24l-.71,1.7c-5.15,12.4-13.66,55.81,8.71,81.3,2.21,2.52,6.24,7,9,6,3.68-1.36,2.83-11.71,1-32-3.89-43.13-4.89-53.57,2-62,1.78-2.18,1.89-1.54,17-10,34.69-19.43,39.88-26,42-29,3-4.21,10.15-14.23,9-27-1.27-14.08-11.87-23.17-21-31-6.93-5.94-16.81-14.41-31-16-10-1.13-13.37,2.17-24,0-7.17-1.46-11.39-4.14-21-10-34.25-20.9-39.2-22.71-45-23-9.32-.47-16.33,3.2-25,8-43.37,24-65,36-74,46-30.33,33.81-33.72,71.6-36,97-1.43,16-.21,27.33,7,33,10.13,8,26.31.13,30,7,2.65,4.93-3.27,13.51-8,18-7.06,6.71-15.81,7.89-33,10-16.08,2-24.32,2.89-34,0-3.39-1-22.08-6.6-23-17-.52-5.85,4.82-10.46,15-19,15.55-13,23.33-19.58,33-20,13.88-.61,16.31,10,40,15,10.25,2.18,15.75,3.35,22,1,3.25-1.22,10.47-4.8,25-42,3.69-9.45,6.79-20,13-41,5.29-17.92,7.4-26.65,3-35-2.4-4.54-7.17-9.82-11-9-5.1,1.08-6.46,12.5-7,17-.77,6.4-1.73,14.42,2,21,6.28,11.08,22.51,12.13,36,13a95.28,95.28,0,0,0,53-12c10-5.68,18.56-10.57,23-21,5.47-12.85,3.28-30.88-6-36-4.84-2.67-12.21-2.17-14,1-1.66,2.93,2.12,7,4,11,5.78,12.41-4.73,28.24-27,69-10.9,20-14,26.47-11,31,2.83,4.25,9,3.67,34,5,27.07,1.44,31.49,2.74,33,6,2.84,6.11-5.87,16.27-12,21-2.86,2.2-10.63,7.45-21,7-11.53-.5-19.85-7.76-27-14-10-8.76-13.23-16-16-15-2.6.93-2.64,8.35-1,21a239.76,239.76,0,0,0,18,65c12.43,29,18.24,32,22,33,7,2,15.09-.59,26-4,14.4-4.51,19.4-9.19,22-7,3.77,3.18-.72,18.15-10,29-6.65,7.77-12.68,9.85-45,22-30.14,11.33-35.9,13.67-41,10-7.37-5.31-8-19.27-4-29,4.77-11.66,16-16.95,28-22,31.25-13.17,42.54-10.37,74-25C362.64,595.24,365,593,368.2,592a9.32,9.32,0,0,1,3.34-.57c3,.57,5,12.52,2,56.53V758" />
    </svg>
</div>
<div class="content1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 3203">
      <path class="path path2" d="M373.5-50.5v137c0,2.39,0,6.67,0,12-.25,125.14,33.43,179,10,210-27.91,36.94-132.17,36.74-164-17.5-26.51-45.17,5.68-113.38,48-143,81.56-57.07,231.86,7.43,263,92,16.31,44.3-10.53,65.7,9,103,37.42,71.44,190.41,96.95,256,37,49.9-45.61,25.85-119.31,61-131,53.66-17.85,123,149.52,207,135,42.22-7.3,58.11-55.39,123-59,16.83-.94,47.93.51,50,10,3.29,15.06-64,61.89-102,37-25.93-17-31.56-63-21-70,7-4.61,25.39,5.11,25,11-.19,2.82-4.76,5.83-8,5-10.29-2.64-15.87-46.28-2-55,17.47-11,68.32,31.83,64,41-2.06,4.38-18.07,4-21-2-6.41-13.09,40.87-70.91,77-57,32.49,12.5,36.72,75.6,25,82-4.83,2.64-15.13-2.86-16-9-2.33-16.34,59.5-54.84,85-34,22.41,18.32,7.59,75-2,76-5.62.59-13.89-17.45-11-20,4.21-3.72,36,22.17,33,28s-37.12-17.8-81-10c-11.32,2-37.76,6.71-49,27-18.9,34.12,21.48,82.93,28,88,.12.09,1.08.84,2.4,1.9,5.43,4.35,9.66,8.25,12.6,11.1.63.61,2.33,2.27,4.49,4.51,0,0,4.52,4.68,8.45,9.35,15.38,18.23,8.06,62.14,8.06,62.14-11.66,70-17.49,105-39,115-27,12.56-68.22-2.28-72-19-1.55-6.84,3.08-14.42,8-18,10.85-7.9,29.56-1.07,40,7,6.1,4.71,10.28,10.55,11,10,1-.73-8.63-9.41-9-21-.38-12.1,9.4-24.4,21-29,3-1.19,10.9-4.32,18-1,7.75,3.63,8,11.89,12,12,6.16.17,5.62-19.77,19-32,11.11-10.16,30.73-14,43-7,11.44,6.51,14.39,21.2,20,20,3.89-.83,3.1-8,9-11,5.5-2.79,12.87.06,17,3,8.72,6.2,11.26,18.69,10,28-1.42,10.53-7.52,15.72-5,19,3.1,4,13-2.94,19,2,4.89,4,5.23,14.57,1,20-2.71,3.49-7.38,5-7,6s4.07-.69,6,1c2.49,2.17,1.4,9.3-2,13-6.07,6.61-20.11,2.94-24,2-36.29-8.76-74.68,2-112,1-71.24-1.84-106.86-2.76-116,2-39.84,20.76-63.09,73.57-70,109-4.24,21.76-5.63,53.88-29.32,88.38A107.12,107.12,0,0,1,1055.5,895c-37.2,40.76-114.53,47.58-133,21-8-11.52-5.68-30.38,3-42,6.71-9,19.75-17.06,31-14,16.08,4.37,22,29.78,24,29,2.24-.88-14.12-30.19-4-56,1.52-3.89,5.53-14.11,15-18,15.83-6.5,38.4,8.21,46,25,3.55,7.84,3.8,16,4,16s-5.19-17.12-3-34c2.77-21.33,18.45-47.46,35-48,26-.85,49.29,61.47,52,60,.88-.48-2.94-6.23-3-14-.12-14.86,13.52-31.88,29-35,22.09-4.45,46,19.82,49,42,4.32,31.47-33.47,57.33-52,70-7.28,5-31.54,20.7-69,27-47.57,8-96.13-2.59-96-9,.18-8.94,95.39-24.43,192-4,58.65,12.4,102.54,21.69,130,61,41.53,59.45,15.77,145.06,5,151-.66.36-1.37.71-1.37.71-10.51,5.18-21,3.62-23.63,3.29-25.15-3.14-50.66,2.22-76,2-69.79-.61-90.85,12.07-101-2-9.47-13.12-1.4-38.35,4-39,4.34-.52,9.9,14.51,11,14,.94-.43-5.72-10.2-3-19,3.66-11.84,23.28-18.58,28-14,2.64,2.57.94,9,1,9s-1.73-9.6,3-15c4.53-5.17,14.48-5.82,20-2,2.36,1.63,4.44,4.44,4,5s-3.51-.9-5-2c-6.7-5-8.88-23,1-33s28-8.15,35,0c4.32,5,5.28,13.35,4,14-.93.47-3.73-2.73-4-3.06a16.17,16.17,0,0,1-2-2.94c-2.14-4.35,5.65-29.75,20-31,15.78-1.38,29.89,27.27,28,29-.92.84-6.79-3.58-10-7-15.86-16.9-11.64-57.34,11-81,4-4.22,24.09-25.18,51-20,24.67,4.75,40.43,28.65,38,32-1.79,2.46-16.71-1.65-22-11-11.07-19.55,16.8-67.5,47-71,43.25-5,88.13,81.49,78,92-3.74,3.88-17.38-.13-21-8-7.68-16.69,25.39-60.14,55-59,39,1.5,70.35,80.14,64,85-2.82,2.16-16.9-7.35-17-17-.11-11,17.9-24,31-21,17.34,4,24.33,35.62,23,57-1.91,30.69-22.15,59.13-29,57-5.69-1.77-7.54-26.28,3-34,13.09-9.58,44.62,7.21,45,22,.23,9.2-11.57,18.54-14,17-3.85-2.44,5.82-38.48,24-43,24-6,58.6,44,52,53-2.59,3.53-12.71,2.34-15-2-4.18-7.91,15.64-30.12,25-27,7.66,2.55,5.56,21.12,14,23,3.81.85,5.65-2.61,11-4,12.94-3.35,30.91,9.44,30,16-1.07,7.71-28.65,9.8-74,12-155.74,7.56-233.61,11.33-287,9-57.25-2.5-79.29-5.68-86,7-17.25,32.61,89.67,127.21,105,138,4.09,2.88,7.94,6.08,12,9,11.12,8,16.1,10.64,19,17a24.21,24.21,0,0,1,2,10c.67,33.1-22.55,88.85-17,133,.75,6,3.24,21.35-1,23-2.46,1-6.13-3.09-7-4-14.67-15.43-76-28-126-41-61.56-16-70.7-23.43-97-19-25.1,4.22-46.89,16.07-46,20,.59,2.58,10.87,1.18,33,6,4.3.94,16.18,3.52,16,5s-12.28,1.86-23,1c-14.51-1.16-18.46-4-25-1a21.11,21.11,0,0,0-11,12s-3.68,10.75,7,28l3,4.77c.68,1,1.3,1.77,1.72,2.29,1.18,1.43,1.69,1.82,2.77,3.25.23.31.73,1,1.29,1.89.67,1.07.92,1.63,1.66,3,0,.07.83,1.54,1.59,2.8,1.62,2.69,2.42,4,3,4,1.35-.07,3.18-4.83,2-9-1-3.71-4.17-5.87-6-7-15.75-9.77-42.93-10.12-53-11a35.13,35.13,0,0,1-4.1-.5s.32,0,.32-.06c0-.27-13.22-1.44-13.22-1.44-58.25-5.14-155-16.28-156-10-.19,1.15,2.86,2.83,12,6,66,22.88,166.24,25.32,178,24,0,0,7.42-.83,11,2l1.69,1.35,3.31,2.65c1.92,1.52,3.44,2.66,4.15,3.19,2.15,1.61,3.48,2.54,3.85,2.81,3.73,2.77,6.63,11.14,5,19a23.47,23.47,0,0,1-8,13c-11.22,9.34-29.12,6.55-30,3-.41-1.65,2.73-4.1,9-9,4.37-3.41,5.74-3.76,7-6,2.93-5.22.14-11.68,0-12-3.29-7.34-13.4-12.51-22-9-5.09,2.08-10,7.33-10,14,0,7.45,6,14.74,13,15,7.86.28,12.64-8.34,13-9a18.67,18.67,0,0,0,2-7c.42-3.44,1.24-10.13-3-15s-11.56-5.7-17-4c-8.15,2.55-11.08,10.5-12,13-3.29,9,.07,16.89,1,19,3.82,8.64,11,12.49,14,14,9,4.59,17.41,3.63,23,3,6.89-.78,14.15-1.6,20-7,3.76-3.47,6.17-8.31,11-18,3.14-6.31,3.18-7.45,5-9,5.77-4.91,15.39-1.94,23,0,29.08,7.41,46.28,4.19,63.07,10.45a103.75,103.75,0,0,1,18.93,9.55h0c3.64,2.42,25.9,15.84,51.63,10.76,0,0,27.39-5.41,31.37-2.76h0a4.63,4.63,0,0,0,.76.39c.88.33,7.24-1.39,7.24-1.39,1.87-.51,3.76-.88,4-1.93,0,0,0,0,0-.07,0-.4-.27-1.34-5-3-9-3.17-23-5-23-5-4.39-.58-6-.73-6-1,0-.82,15-1,17-1,7.49-.08,11.28-.09,13,1,2.07,1.32,4.39,3.84,10,7l.72.4c4.4,2.38,12.9,7,17.28,2.6h0c5.76-5.76,13.07-9.5,16-14,3.08-4.72,2.24-11.66,0-16-5.55-10.75-24.28-14.41-33-6-4,3.85-6.81,11.12-4,18a16.24,16.24,0,0,0,15,10c10.7-.22,15.42-12.49,16-14,2.58-6.72,2.91-17.11-3-22-1.7-1.41-5.13-3.36-20-1-16.13,2.56-17.27,5.69-31,8-10,1.68-20.3,1.88-31-1-2-.55-11.22-3-11-5,.26-2.34,13.48-3,36-4,17.77-.8,25.53-.68,26-3,.09-.45.25-2.62-12-8-17.38-7.63-29.76-8.55-47-12-17.86-3.57-13.16-4.31-35-9-12.81-2.75-25-8.65-38-10-2.78-.29-8.89-.8-10-4-1.18-3.38,3.87-8,5-9,13.69-12.45,53.44,6.65,110,11,12.17.94,28.73,1.47,41-9,5.44-4.64,8.14-9.82,11-16,14.68-31.72,15.52-50.84,26-76,6-14.52,17.54-36.41,22-35,7.55,2.38-4.4,71.54-11,123-.1.81-2.21,17.49-1.29,23.54a23,23,0,0,1,.22,5.58,29.1,29.1,0,0,1-.93,4.88c-.64,2.8-2,8.82,0,11,2.44,2.63,9.73-.47,11-1,33.21-13.8,166.06-19,215-19h0c100.93,0,81.22-1.75,95-1,12,.65,17.93,1,18,2,.29,4-82.59,13.61-141,19-73,6.73-109.43,10.1-149,12,0,0-68.13,3.27-68,7,0,1.11,11.88-.61,20,7,5.83,5.46,9.76,15.75,6,24-4.17,9.15-15.68,11.1-21,12-3.21.54-7.19.37-15,0-14.59-.69-20.75-2-21-1-.31,1.21,9.21,5.18,19,8a136,136,0,0,0,45,5c9.58-.51,16-.91,24-4a77.53,77.53,0,0,0,19-11c8.77-6.77,7.88-8.84,13-11,11.14-4.7,23.45,1.68,26,3a41.63,41.63,0,0,1,14,12c22,28.94,20,59.46,36,66,15.7,6.4,30.81-17.48,46-10,14.5,7.13,10.2,33.51,21,36s18.43-23,34-25c17.27-2.18,22,31.58,50,54,30.72,24.57,55.87,10.24,77,25,50.26,35.11,46,212.58-55,269-75.44,42.14-189.43,8.13-195-28-6-38.94,109.81-107,144-81,37.75,28.73,1.59,191.66-98,253-61.58,37.94-101.25,8.58-295-7-213.88-17.2-365.84,2.47-427,12,0,0-34.42-1-177,39-2.25.63-12.94,3.72-13,8,0,2.9,4.84,3.62,10,9,5,5.18,3.61,7.81,9,18,6.29,11.9,9.63,11.11,11,18,1.61,8.06-2.6,10.87-2,19,.84,11.36,8.6,21.84,12,21,2.73-.68,2.92-8.74,3-14,.55-34.44-16.6-74.29-21-73-2.78.82-2.18,18.62,7,29,.43.49,8.1,9,14,7,3-1,3.84-4.24,6-4,2.81.31,2.13,5.83,6,10,4.19,4.52,8.75,2.11,22,7,4.49,1.66,6.74,2.48,8,4,3.9,4.68.71,10.16,5,17,.71,1.13,3.38,5.39,6,5,4.6-.68,5.37-15.14,7-15,.79.07,1.08,3.49,2,12,1.22,11.28,1.67,14.05,4,16,3,2.54,6.73,1.58,7,3,.53,2.76-13.43,6.35-13,10,.22,1.86,3.91,1.66,9,6,2,1.68,4,3.4,5,6,2.16,5.54-2.78,8.59-2,14,1.22,8.52,14.58,8.59,16,17,1,5.82-5,8.24-4,16,.78,5.94,4.89,9,4,10-1.21,1.31-9.75-3.31-17-10-9.88-9.13-12.44-17.58-19-31-8.32-17-20.18-41.25-30-40-5.73.73-9.09,9.92-10,15-2.69,15.07,9.85,29.95,22,36,9.74,4.86,21.12,5,21,6-.1.88-8.39-.09-9,2-.91,3.11,16.47,8.41,16,15-.29,4.09-7.22,5.23-7,9,.21,3.61,6.56,2.95,11,9,3.54,4.83,1.88,8.48,7,16,2.43,3.57,3.6,3.91,4,4,5.42,1.25,10.29-10.2,14-9,2.76.89,3,8.18,2,13-.17.85-2,9.59-6,10s-6.55-7.55-8-7c-2.25.85.77,21.21,7,22,3.73.47,7.81-6.17,8-6s-5.75,4.85-7,12a14.85,14.85,0,0,0,1,9c3.17,6.52,10,5.56,11,10,.89,4-4.43,6-8,15a25.17,25.17,0,0,1-3,6c-1.89,2.69-3,3-3,4,0,3.87,15.22,6.68,15,8s-14.92-2.73-19,3c-2.24,3.14.64,6.51,1,14,.43,9.08-3.24,16-7,23-2.73,5.1-7.77,14.55-18,21-13,8.21-20.83,3-28,11-6.14,6.84-6.48,17.43-4,25,3.46,10.55,13.91,19.74,21,18,4.34-1.06,4.68-5.55,9-6,4.91-.52,8.09,4.89,14,10,8.93,7.72,15.09,7,22,11,15.15,8.83,25,35,19,54-.89,2.82-10.27,16.25-29,43-3,4.23-7.16,10.22-5,14,2,3.45,8.94,4.6,12,2s.76-8.07,4-10c2-1.19,5.19-.5,6,1,.89,1.65-.92,4.61-3,8-1.49,2.43-2.33,3.2-2,4,.72,1.75,6,1.12,7,1,8.45-1,12.25-5.41,14-4s-1.9,5.8,0,12c.31,1,1.32,4.3,4,6,5.5,3.48,14.48-2,16-3,10.33-6.57,9.36-15.28,19-19,4.94-1.9,6,.06,9-2,7.75-5.37-.15-18.38,7-29,6.62-9.83,17.49-4.81,23-15,4.32-8,.67-16.74,7-21,2.08-1.4,2.89-.74,6-2,8.78-3.56,12.79-13.11,14-16,5.53-13.16-1.12-18.51,5-27,4-5.51,9.51-7.06,9-11-.17-1.31-.86-1.78-6-7-5.91-6-6.55-7-7-8-1.86-4.27-.2-8.83,1-12,3.28-8.64,12.82-22.06,27-24h0c0,.08,15.15.49,29,7,4.69,2.2,9,4.24,9,7,0,4.61-12.24,8.3-13,7-.92-1.58,16.67-7.88,18-20,1-9.41-8.73-13.29-7-22,1.46-7.35,8.86-6.81,16-16,6-7.74,3.34-11.43,9-35,4.76-19.83,8.4-24.48,5-29-4.33-5.75-15.25-4.91-27-4-9.37.72-14,1.08-19,4-13.15,7.74-11.56,22.85-21,25-1.1.25-3.13.5-15-6-18.56-10.17-20-14.31-31-18-5.55-1.87-10.8-2.7-19-4-13.41-2.13-14.15-.79-18-3-11.44-6.56-13.8-23.42-14-25s-.23-2.49-.29-3.94c-.58-13.47,3.3-18.62,4.29-29.06.63-6.6,1.68-17.66-5-23-4.48-3.58-11.91-4.16-16-1-4.65,3.59-1.12,14.6,3,29,2.24,7.83,3.87,11.21,2,15-2.6,5.28-10.48,8.3-14,6-2.79-1.82-.8-5.65-4-12a25.62,25.62,0,0,0-8-9c-2.89-2.19-5.07-3-16-7s-10.8-4-11-4c-13.23,2.34,11,80.34-24,126-21.32,27.85-48.58,22.68-53,45-5.34,27,33.63,38.79,34,80,.16,18.1-7.29,22.79-8,55-.33,14.78-.83,37.59,7,40,7.56,2.32,23.17-14.28,20-23-4.19-11.52-42.64-13.38-53,1-3.07,4.27-8,15.92-8,16l-18-24c-7.9.35-16.53-.57-20-6-5.92-9.25,7.72-24.4,3-29-4.11-4-18.93,3.11-28,12a42.75,42.75,0,0,0-12,20c-3.22,12.7,2.77,16.44,0,25-4.59,14.16-23,10.17-36,26-4.5,5.49-4.39,8.55-11,41-5.79,28.42-8.73,42.7-11,46-13.19,19.2-29.78,8.37-59,31-19.48,15.08-16.82,23.55-38,36-10.59,6.22-18.13,8.15-28,18-10.26,10.24-9.33,15.36-17,19-14.14,6.71-25.18-6.95-36,0-6.74,4.33-4.49,10.92-15,26a107.21,107.21,0,0,1-11,13c-18.28,19.12-34.18,28.24-43,37-29.3,29.07-16.88,90.08-19,90-1.11,0-.53-16.57-9-25a18.7,18.7,0,0,1-2-2.23c-5.36-7.06-4.63-17.37-3-17.77,3.43-.84,6.16,42.1,31,52,.6.24,15.44,5.92,26-1,7.88-5.16,7.89-13.74,13-14,0,0,3.63-.19,17,20a48.84,48.84,0,0,0,20,12c8.66,2.56,11.82.58,23,3,13.72,3,14.05,7,23,8,14.22,1.52,26.18-7.4,31-11,13.21-9.85,9.37-15.57,25-29a90,90,0,0,1,25-16c11.63-4.84,14.8-3,18-7,8.72-10.91-9.07-31.73-1-41,5.34-6.13,15,.8,25-6,8.58-5.86,10.23-17,12-29,0,0,1.7-11.47-2-47,26.75,3.46,38.9-2.52,45-9,1.65-1.75,2.68-3.35,14-20,6.08-17,10.6-22.31,14-22,8,.73,13.93,32.78,14,33,21.23.39,28.28-3.54,30-8,4.39-11.36-22-36-22-36l17-32c18.44-10.3,25.28-21.42,28-30,4.06-12.81-.22-22.61,8-32,5.22-6,8.85-4.18,18-12,2.3-2,16.62-14.2,14-22s-20.8-8.52-28-8c-44.69,3.24-76.36,88.3-90,126-39.22,108.39-13.24,124.05-48,184-2.83,4.89-53.94,90.28-142,107-32,6.08-78.4,4.86-84-11-2.32-6.56,2.75-14.48,0-16-3.53-1.95-16.46,8.62-18,22-.21,1.82-1.23,10.67,4,15,5.63,4.66,13.17-.11,17,2,6.68,3.67,3,28.83-23,97" />
    </svg>
</div>
<div class="footer"></div>

.header에 path1을 넣어주고, 스크롤 애니메이션에 쓰일 div.content1에 path2를 넣어준다.

 

getTotalLength() 메서드는 사용자 단위의 전체 경로 길이에 대해 사용자 에이전트의 계산된 값을 반환합니다.

path2의 length를 getTotalLength 함수로 가져오고 stroke-dasharray와 stroke-dashoffset으로 설정한다.

const content1 = document.querySelector('.content1')
const path1 = document.querySelector('.path2')
const path1Length = path1.getTotalLength();

path1.style.strokeDasharray = path1Length;
path1.style.strokeDashoffset = path1Length;

 

window에 scroll함수를 선언해 주고

window.addEventListener('scroll',scrollHandler);

 

다음 스크롤이 변할 때마다 stroke-dashoffset값을 바꿔주기 위해 calcDashoffset() 함수를 따로 빼서 선언해 준다.

이전에 설명한 방법대로 [JavaScript] svg 스크롤 애니메이션(1) - stroke-dasharray, stroke-dashoffset

ratio를 통해서 dashoffset value를 반환시켜 주는데

function calcDashoffset(scrollY, element, length){
  const ratio = (scrollY - element.offsetTop) / element.offsetHeight;
  const value = length - (length * ratio);
  console.log(value);
}

function scrollHandler(){
  const scrollY = window.scrollY + window.innerHeight;
  path1.style.strokeDashoffset = calcDashoffset(scrollY, content1, path1Length);
}

console창으로 value를 확인해 보면 

value가 path 밑에서는 0이 아닌 -값으로 초과되어 버리고

반대로 path 맨 위에서는 length 보다 더 큰 값이 되어버리기 때문에

다음과 같이 조건을 걸어주어 value가 0에서 length 사이값만 갖도록 해준다.

function calcDashoffset(scrollY, element, length) {
  const ratio = (scrollY - element.offsetTop) / element.offsetHeight;
  const value = length - (length * ratio);
  console.log(value);
  return value < 0 ? 0 : value > length ? length : value; 
}

 

path가 그려지는 모습을 화면 중간부터 보고 싶은데

스크롤 값에서 window.innerHeight 즉, 화면 높이만큼을 더해주고 계산을 시작하다 보니까

화면의 끝에서부터 path가 그려지기 시작한다.

 

화면의 중간부터 path가 그려지도록 하려면

scrollY 변수값을 window.scrollY + window.innerHeight에 0.8 정도를 곱한 값으로 설정하여

화면의 80% 지점부터 그려지도록 한다.

 

상단에서 스크롤 시 화면 영역의 0.8배만큼 바로 그려지는 게 조금 어색하기 때문에

스크롤함수에서 dashoffset 구하는 공식을 window.scrollY만 0으로 바꿔서 처음 로드 시에 한 번만 실행시켜 주어

스크롤을 할 때 선이 부드럽게 이어지도록 해준다.

 

완성코드

const content1 = document.querySelector('.content1')
const path1 = document.querySelector('.path2')
const path1Length = path1.getTotalLength();

path1.style.strokeDasharray = path1Length;
path1.style.strokeDashoffset = calcDashoffset(window.innerHeight * 0.8, content1, path1Length);

function calcDashoffset(scrollY, element, length) {
  const ratio = (scrollY - element.offsetTop) / element.offsetHeight;
  const value = length - (length * ratio);
  // console.log(value);
  return value < 0 ? 0 : value > length ? length : value; 
}

function scrollHandler() {
  const scrollY = window.scrollY + (window.innerHeight * 0.8);
  path1.style.strokeDashoffset = calcDashoffset(scrollY, content1, path1Length);
}

window.addEventListener('scroll', scrollHandler);

See the Pen scroll line animation by hy0ni (@hy0ni) on CodePen.