10 스킬바

1. 스킬바 막대형

지시문
HTML
CSS
JS

1.1. 스킬바 원형

완성화면

HTML
CSS
JS

1.2. 막대형2

지시문
HTML
CSS
JS

2. with GSAP

gsap 을 사용해보자

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

완성

html

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

1
.circular-pbar {
2
  width: 200px;
3
  height: 200px;
4
  border-radius: 50%;
5
  background: conic-gradient(darkred 33%, 0, black);
6
  position: relative;
7
}
8
.circular-pbar-counter {
9
  position: absolute;
10
  font-size: 3em;
11
  color: white;
12
  top: 50%;
13
  left: 50%;
14
  transform: translate(-50%, -50%);
15
}

요약

.circular-pbar 그라디언트 색상변경

지역변수 —p 선언후 0 할당 배경으로 grey 색상을 지정하고 색상의 location에 변수를 할당한다.

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

js :::note gsap.to 를 사용하여 변수 p의 값인 location 을 변경한다 :::

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

완성화면

참고

숫자를 애니메이트 해보자

1
const circles = document.querySelectorAll('.circular-pbar');
2
circles.forEach((el) => {
3
  const counter = el.querySelector('.circular-pbar-counter');
4
  const tg = counter.textContent + '%';
5

6
  const tm = gsap.timeline({
7
    defaults: { duration: 4, ease: 'expo.out' },
8
    scrollTrigger: {
9
      trigger: el,
10
      toggleActions: 'play pause resume reset',
11
    },
12
  });
13

14
  tm.from(counter, {
15
    textContent: 0,
16
    modifiers: {
17
      textContent: (textContent) => {
18
        return textContent.toFixed();
19
      },
20
    },
21
  });
22
  tm.to(el, { '--p': tg }, 0);
23
});

#4- counter 요소의 텍스트(목표 진행률 값)을 읽어와서 ’%’ 문자와 결합. 이 값은 나중에 CSS 변수로 사용됨.
#6~7- GSAP 타임라인 생성 후 기본값으로 지속 시간(4초), 가속도 효과(‘expo.out’) 할당
#16 - modifiers 플러그인은 gsap 의 기본으로 내장된 것으로 특정속성의 변경값을 실시간으로 수정해준다.
- 모든 애니메이션에 사용 가능하며 개발자가 원하는 모든 속성에 적용할수 있다.
- 이때 함수를 사용해야 한다.