CSS와 자바스크립트를 이용한 손 그림 애니메이션 만들기

18 Oct 2023

javascript

안녕하세요! 이번에는 CSS와 자바스크립트를 사용하여 손 그림 애니메이션을 만들어보려고 합니다. 이 애니메이션은 손 그림이 점점 완성되는 모습을 보여줄 것입니다. 그러면 바로 시작해보겠습니다.

1. HTML 구조 설정하기

먼저, 해당 애니메이션을 보여줄 HTML 구조를 설정해야 합니다. 아래와 같이 div 요소들을 사용하여 손 그림을 표현할 수 있는 구조를 만들어주세요.

<div id="hand">
  <div class="hand-part" id="palm"></div>
  <div class="hand-part" id="thumb"></div>
  <div class="hand-part" id="index-finger"></div>
  <div class="hand-part" id="middle-finger"></div>
  <div class="hand-part" id="ring-finger"></div>
  <div class="hand-part" id="pinky"></div>
</div>

2. CSS 스타일링 설정하기

다음으로, CSS를 사용하여 손 그림의 초기 상태와 애니메이션 효과를 설정해보겠습니다. 아래와 같이 각각의 손 부위에 대한 스타일링을 적용해주세요.

.hand-part {
  position: absolute;
  background-color: #000;
}

#palm {
  width: 120px;
  height: 180px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 50% 20px 20px;
}

#thumb {
  width: 40px;
  height: 120px;
  bottom: 120px;
  right: 60px;
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;
}

#index-finger {
  width: 20px;
  height: 100px;
  bottom: 160px;
  right: 20px;
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;
}

#middle-finger {
  width: 20px;
  height: 100px;
  bottom: 170px;
  left: 40px;
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;
}

#ring-finger {
  width: 20px;
  height: 100px;
  bottom: 170px;
  left: 80px;
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;
}

#pinky {
  width: 20px;
  height: 80px;
  bottom: 200px;
  left: 100px;
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;
}

3. 자바스크립트로 애니메이션 만들기

이제 자바스크립트를 사용하여 손 그림이 점점 완성되는 애니메이션을 만들어보겠습니다. 아래와 같이 자바스크립트 코드를 추가해주세요.

const parts = document.getElementsByClassName('hand-part');
let index = 0;

function animateHand() {
  if (index >= parts.length) {
    return;
  }

  parts[index].style.backgroundColor = '#fff';
  index++;

  setTimeout(animateHand, 500);
}

animateHand();

위의 코드는 hand-part 클래스를 가진 요소들을 가져와서 순차적으로 배경색을 변경하여 손 그림이 완성되는 애니메이션을 구현합니다.

마무리하며

이렇게 CSS와 자바스크립트를 활용하여 손 그림 애니메이션을 만들었습니다. 위의 코드를 HTML 문서에 추가하고 브라우저에서 실행해보면 손 그림이 점점 완성되는 효과를 확인할 수 있을 것입니다. 만약 다양한 애니메이션 효과를 추가하고 싶다면 CSS와 자바스크립트를 더욱 활용해보세요!

#tech #animation