스킬바 UI

스킬바는 포트폴리오 사이트에서 기술 숙련도를 시각적으로 보여주는 UI 요소이다. 스크롤 위치에 따라 막대나 원이 채워지는 애니메이션을 구현한다.

1. 막대형 스킬바

스크롤이 특정 위치에 도달하면 막대가 늘어나면서 퍼센트 숫자가 올라가는 애니메이션이다.

Note: jQuery 3 기반의 막대형 스킬바를 만들어줘. 조건은 다음과 같아. 1) 프로그레스 바 3개를 세로로 배치하고, 각각 목표 퍼센트를 data-rate 속성으로 지정한다(30%, 90%, 60%). 2) 스크롤이 애니메이션 영역에 도달하면 막대의 width가 0%에서 목표 퍼센트까지 2500ms 동안 늘어난다. 3) 동시에 퍼센트 숫자가 0부터 목표값까지 카운트업된다. 4) 애니메이션은 1회만 실행된다. 5) 이벤트 바인딩은 .on('scroll')을 사용한다.

HTML

<div class="content">contents</div>
<div class="animation">
  <div class="progress-bar">
    <div class="bar"></div>
    <div class="rate" data-rate="30"></div>
  </div>
  <div class="progress-bar">
    <div class="bar"></div>
    <div class="rate" data-rate="90"></div>
  </div>
  <div class="progress-bar">
    <div class="bar"></div>
    <div class="rate" data-rate="60"></div>
  </div>
</div>
<div class="content">contents</div>

CSS

.progress-bar {
  position: relative;
  width: 960px;
  height: 30px;
  margin: 3em auto;
  border: 1px solid green;
}
.progress-bar .bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: green;
}
.progress-bar .rate {
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  line-height: 30px;
  font-size: 1.2em;
  color: green;
}
.content {
  height: 800px;
  font-size: 3em;
}

JS

$(function () {
  var wrap = $('.progress-bar');
  var ost = $('.animation').offset().top - 600;
  var isAni = false;

  $(window).on('scroll', function () {
    if ($(window).scrollTop() >= ost && !isAni) {
      runAnimation();
    }
  });

  function runAnimation() {
    wrap.each(function () {
      var $this = $(this);
      var bar = $this.find('.bar');
      var txt = $this.find('.rate');
      var rate = txt.attr('data-rate');

      bar.animate({ width: rate + '%' }, 2500);

      $({ rate: 0 }).animate(
        { rate: rate },
        {
          duration: 2000,
          progress: function () {
            var now = this.rate;
            txt.text(Math.floor(now) + '%');
          },
          complete: function () {
            isAni = true;
          },
        }
      );
    });
  }
});

$('선택자').animate({ 속성: 값 }, 시간);

1.1. 원형 스킬바

SVG의 circle 요소와 stroke-dashoffset 속성을 활용한 원형 프로그레스 바이다.

Note: jQuery 3 기반의 원형 스킬바를 만들어줘. 조건은 다음과 같아. 1) SVG circle 요소(반지름 100, 둘레 628)를 사용한 원형 프로그레스 바 4개를 가로로 배치한다. 2) 각 원의 중앙에 퍼센트 숫자를 표시하고, data-num 속성으로 목표값을 지정한다(20, 60, 80, 50). 3) stroke-dasharray와 stroke-dashoffset을 628로 설정하고, 스크롤 시 dashoffset을 줄여서 선이 그려지는 애니메이션을 구현한다. 4) 12시 방향부터 시작하도록 rotate(-90deg)를 적용한다. 5) 각 원마다 다른 stroke 색상을 지정한다. 6) hasClass로 중복 실행을 방지한다. 7) 이벤트 바인딩은 .on('scroll')을 사용한다.

HTML

<section>
  <h2>content</h2>
</section>
<div class="charts">
  <div class="chart">
    <h2 data-num="20">0</h2>
    <svg>
      <circle cx="110" cy="110" r="100"></circle>
    </svg>
  </div>
  <div class="chart">
    <h2 data-num="60">0</h2>
    <svg>
      <circle cx="110" cy="110" r="100"></circle>
    </svg>
  </div>
  <div class="chart">
    <h2 data-num="80">0</h2>
    <svg>
      <circle cx="110" cy="110" r="100"></circle>
    </svg>
  </div>
  <div class="chart">
    <h2 data-num="50">0</h2>
    <svg>
      <circle cx="110" cy="110" r="100"></circle>
    </svg>
  </div>
</div>
<section>
  <h2>content</h2>
</section>

CSS

.charts {
  width: 80%;
  margin: 3rem auto;
  display: flex;
  justify-content: center;
}
.charts .chart {
  margin: 0 20px;
  position: relative;
}
.charts .chart h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.charts .chart svg {
  width: 220px;
  height: 220px;
}
circle {
  fill: #ffffff;
  stroke-width: 20;
  stroke-dasharray: 628;
  stroke-dashoffset: 628;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-linecap: round;
}
.charts .chart:nth-child(1) circle { stroke: #ffc114; }
.charts .chart:nth-child(2) circle { stroke: #ff5248; }
.charts .chart:nth-child(3) circle { stroke: #19cdca; }
.charts .chart:nth-child(4) circle { stroke: #4e88e1; }
section {
  height: 100vh;
}

JS

$(function () {
  var charts = $('.charts');
  var chart = $('.chart');
  var ost = chart.offset().top - 700;

  $(window).on('scroll', function () {
    var sct = $(this).scrollTop();
    if (sct >= ost) {
      if (!charts.hasClass('active')) {
        animateChart();
        charts.addClass('active');
      }
    }
  });

  function animateChart() {
    chart.each(function () {
      var item = $(this);
      var title = item.find('h2');
      var num = title.attr('data-num');
      var circle = item.find('circle');

      $({ rate: 0 }).animate(
        { rate: num },
        {
          duration: 1500,
          progress: function () {
            var now = this.rate;
            var offset = 630 - (630 * now) / 100;
            title.text(Math.floor(now));
            circle.css({ strokeDashoffset: offset });
          },
        }
      );
    });
  }
});

1.2. SVG 라인형 스킬바

circle 대신 line 요소를 사용한 직선형 변형이다.

Note: jQuery 3 기반의 SVG 라인형 스킬바를 만들어줘. 조건은 다음과 같아. 1) SVG line 요소(x1=0, y1=0, x2=500, y2=0)를 사용한 직선형 프로그레스 바 3개를 가로로 배치한다. 2) stroke-dasharray와 stroke-dashoffset을 300으로 설정하고, 스크롤 시 dashoffset을 줄여서 선이 그려지는 애니메이션을 구현한다. 3) 각 라인 중앙에 퍼센트 숫자 카운트업을 표시한다. 4) 각 라인마다 다른 stroke 색상을 지정한다. 5) hasClass로 중복 실행을 방지한다. 6) $(function(){})로 감싸고, 이벤트 바인딩은 .on('scroll')을 사용한다.

HTML

<section>
  <h2>content</h2>
</section>
<div class="charts">
  <div class="chart">
    <h2 data-num="20">0</h2>
    <svg>
      <line x1="0" y1="0" x2="500" y2="0"></line>
    </svg>
  </div>
  <div class="chart">
    <h2 data-num="20">0</h2>
    <svg>
      <line x1="0" y1="0" x2="500" y2="0"></line>
    </svg>
  </div>
  <div class="chart">
    <h2 data-num="80">0</h2>
    <svg>
      <line x1="0" y1="0" x2="500" y2="0"></line>
    </svg>
  </div>
</div>
<section>
  <h2>content</h2>
</section>

CSS

.charts {
  width: 80%;
  margin: 3rem auto;
  display: flex;
  justify-content: center;
}
.charts .chart {
  margin: 0 20px;
  position: relative;
}
.charts .chart h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
line {
  stroke-width: 20;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}
.charts .chart:nth-child(1) line { stroke: #ffc114; }
.charts .chart:nth-child(2) line { stroke: #ff5248; }
.charts .chart:nth-child(3) line { stroke: #19cdca; }
section {
  height: 100vh;
}

JS

$(function () {
  var charts = $('.charts');
  var chart = $('.chart');
  var ost = chart.offset().top - 700;

  $(window).on('scroll', function () {
    var sct = $(this).scrollTop();
    if (sct >= ost) {
      if (!charts.hasClass('active')) {
        animateChart();
        charts.addClass('active');
      }
    }
  });

  function animateChart() {
    chart.each(function () {
      var item = $(this);
      var title = item.find('h2');
      var num = title.attr('data-num');
      var el = item.find('line');

      $({ rate: 0 }).animate(
        { rate: num },
        {
          duration: 1500,
          progress: function () {
            var now = this.rate;
            var offset = 300 - (300 * now) / 100;
            title.text(Math.floor(now));
            el.css({ strokeDashoffset: offset });
          },
        }
      );
    });
  }
});

Warning: 원본 코드에서 라인형(1.2)의 JS는 $(function(){})로 감싸져 있지 않았다. 문서 로드 전에 DOM 요소를 찾으면 undefined 오류가 발생할 수 있으므로 반드시 감싸야 한다.

2. GSAP으로 원형 스킬바 만들기

GSAP과 ScrollTrigger를 사용하면 jQuery 없이도 스킬바 애니메이션을 구현할 수 있다.

Note: GSAP과 ScrollTrigger로 원형 스킬바를 만들어줘. 조건은 다음과 같아. 1) CSS conic-gradient와 CSS 변수 --p를 사용하여 원형 게이지를 구현한다. 2) gsap.to로 CSS 변수 --p를 0에서 목표 퍼센트까지 4초 동안 변경하여 게이지를 채운다. 3) ease는 expo.out을 사용한다. 4) 원 중앙의 숫자도 0부터 목표값까지 카운트업하되, modifiers 플러그인의 toFixed()로 소수점을 제거한다. 5) ScrollTrigger의 toggleActions를 play pause resume reset으로 설정하여 스크롤 위치에 따라 애니메이션을 제어한다. 6) timeline을 사용하여 게이지 채우기와 숫자 카운트를 동시에 실행한다.

2.1. CDN 로드

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

2.2. HTML 구조

<div class="circular-pbar">
  <span class="circular-pbar-counter">0</span>
</div>

2.3. 기본 CSS

.circular-pbar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(darkred 33%, 0, black);
  position: relative;
}
.circular-pbar-counter {
  position: absolute;
  font-size: 3em;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2.4. CSS 변수로 애니메이션 준비

Tip: .circular-pbar에 CSS 지역변수 --p를 선언하고 0을 할당한다. 배경의 색상 위치에 이 변수를 넣으면 JS에서 변수 값만 바꿔도 게이지가 움직인다.

.circular-pbar {
  --p: 0;
  background: conic-gradient(#df3030 var(--p, 0), 0, #cacaca);
}

2.5. GSAP으로 게이지 애니메이션

Note: gsap.to를 사용하여 CSS 변수 --p의 값을 변경하면 원형 게이지가 채워진다.

gsap.to('.circular-pbar', {
  '--p': '33%',
  duration: 4,
  ease: 'expo.out',
});

2.6. 숫자 카운트 + ScrollTrigger 적용

스크롤 위치에 따라 숫자도 함께 올라가도록 확장한다.

const circles = document.querySelectorAll('.circular-pbar');

circles.forEach((el) => {
  const counter = el.querySelector('.circular-pbar-counter');
  const tg = counter.textContent + '%';

  const tm = gsap.timeline({
    defaults: { duration: 4, ease: 'expo.out' },
    scrollTrigger: {
      trigger: el,
      toggleActions: 'play pause resume reset',
    },
  });

  tm.from(counter, {
    textContent: 0,
    modifiers: {
      textContent: (textContent) => {
        return textContent.toFixed();
      },
    },
  });

  tm.to(el, { '--p': tg }, 0);
});

modifiers: {
  textContent: (value) => {
    return Math.round(value);
  },
}