svg로 스크롤 인디케이터 만들기

svg의 stroke-dashoffset 값을 통해 만드는 스크롤 인디케이터입니다.

스크롤 해보세요!

HTML

<svg id="scroll-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <path fill="rgba(255,255,255,.5)" stroke="#fff" stroke-width="3" d="M362.3,181.1c2.8-3.2,14.5,6.7,10.1,12.6c-7.1,9.5-18.3-6.8-21.6-11.6c-1.4-2.1-3.2-4.1-5.2-5.7 c-3.7-3.3-8.4-5.4-13.3-6c-11.3-1.2-31.9,10.1-32.3,22.7c-0.3,8,7.7,13,11.6,19.1c6.5,10.1,10.3,23.4,11.4,35.3 c2.1,23.3-2.8,46.6-14.3,67c-11,19-39,44.6-59.5,21.3c9.6-9.1,17.7-19.8,23.8-31.6c5.7-10.6,9.6-22,11.6-33.8 c1.7-9.7,1-19.8-2.1-29.2c-2.7-8-8.7-14.5-16.6-17.6c-14.6-6.3-31.6-4.1-44.1,5.8c-6.3,5.1-11.4,11.5-14.9,18.9 c-4,8.4-6.3,17.5-6.8,26.9c-0.5,10.1,0.3,20.3,2.5,30.2c2.6,11.8,7.4,23,14.1,33c-3.3,3.2-7.1,5.8-11.2,7.7 c-3.7,1.7-7.9,2.1-11.8,1.1c-7.5-1.7-14.2-6-18.8-12.1l-0.2-0.5l-0.5-0.4c-3.3-4.9-5.5-10.4-6.6-16.2c-1.8-11.6-1.3-27.6,1.9-45.1 c2.6-12.6,6-25.1,10.1-37.3c0.6-1.6,1.2-3.1,1.8-4.7c13.9-34.5,30.9-72.7,40.1-93.4c16,0.8,32.1,0.5,48.1-1.1 c93.4-10.5,81.8-117.5,81.8-117.5c-45.1,57.5-139.2,47.6-202.8,62.9C91.1,95.8,21.3,148,8.1,212.3c-15.3,74.5,31.4,79,31.4,79 l45.1-37.4c-57.5-6.8-57.5-75.9-14.4-105.5c19.7-13.5,49-15.5,81.5-14.5c-8.6,29.3-31,107.8-33.7,148.3 c-3.3,48.8,7.9,83.4,59.3,92.1c4,0.4,8,0.6,12,0.5h0.1c12.9-1.1,26.2-7.9,40-20.4c7.2,9,14.8,14.9,22.9,17.6 c37.2,12.7,67.6-9.3,86.4-39.1c6.6-10.7,12.1-21.9,16.6-33.6c1.1-2.8,2.2-5.6,3.1-8.4c6.6-19,11.5-42.3,8.4-65.4 c2.2-0.3,4.3-0.9,6.3-1.8c13.2-5.3,21.8-15.8,22.9-30.1C397.4,175.6,377,164.6,362.3,181.1z M241.7,318.5c0-0.2-0.1-0.5-0.3-0.6 c-1.7-3.7-2.9-7.5-3.6-11.5c-1.9-9.9-4.2-27.5,1.7-36.3l0,0c4.7-6.9,13.7-7.9,18,0c3.7,6.7-1.7,17.8-4.2,24.3 C249.9,302.7,246.1,310.7,241.7,318.5z" />
</svg>

path의 내용은 별로 중요하지 않고, "scroll-indicator"란 id와 'stroke, stroke-width, fill 세 가지 옵션이 중요합니다.

JS

var a = document.getElementById("scroll-indicator"),
    b = a.getTotalLength();
    a.style.strokeDasharray = b, a.style.strokeDashoffset = b, window.addEventListener("scroll", si);
 
function si() {
  var c = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  a.style.strokeDashoffset = b - b * c
}

기본적으로 스크롤 인디케이터와 작동 방법은 똑같습니다.

조금 예쁘게 스크롤 인디케이터를 만들 수 있단 장점은 있지만, 놓을 공간이 부족하다는 단점과 직관성이 떨어진다는 단점 때문에 섣불리 쓰긴 힘드네요.