자바스크립트로 스피커 애니메이션 구현하기

18 Oct 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 스피커 애니메이션을 구현하는 방법을 알아보겠습니다.

필요한 기술

HTML
CSS
자바스크립트

스피커 애니메이션 구현하기

1. HTML 마크업 작성하기

먼저, 스피커 애니메이션을 보여줄 HTML 요소를 작성해야 합니다. 아래와 같은 구조를 사용합니다.

<div class="speaker">
  <div class="circle"></div>
  <div class="line"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

2. CSS 스타일 작성하기

다음으로, 스피커 애니메이션을 위한 CSS 스타일을 작성해야 합니다. 각 요소들에 대해 크기와 색상, 위치 등을 지정해줍니다.

.speaker {
  position: relative;
  width: 200px;
  height: 200px;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background-color: #ff0000;
  border-radius: 50%;
}

.line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000000;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.left,
.right {
  position: absolute;
  top: 50%;
  width: 50%;
  height: 2px;
  background-color: #000000;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.speaker.active .line,
.speaker.active .left,
.speaker.active .right {
  transform: scaleX(1);
}

위 스타일은 스피커 애니메이션을 구현하기 위한 기본 스타일입니다. .speaker.active 클래스를 추가하면 애니메이션이 동작하도록 설정되어 있습니다.

3. 자바스크립트로 애니메이션 제어하기

마지막으로, 자바스크립트를 사용하여 스피커 애니메이션을 제어합니다. 아래는 애니메이션을 토글하는 예제 코드입니다.

const speaker = document.querySelector('.speaker');

speaker.addEventListener('click', () => {
  speaker.classList.toggle('active');
});

위 코드는 .speaker 요소를 클릭할 때마다 .active 클래스를 토글하여 애니메이션을 제어합니다.

마무리

위 방법을 통해 자바스크립트로 스피커 애니메이션을 구현할 수 있습니다. 스피커 애니메이션을 활용하여 웹사이트나 앱에 생동감을 더할 수 있습니다.

참고자료: