자바스크립트로 전화벨이 울리는 애니메이션 만들기

18 Oct 2023

javascript

이번 블로그에서는 자바스크립트를 사용하여 전화벨이 울리는 애니메이션을 만들어보겠습니다.

1. HTML 작성하기

먼저, HTML 파일을 생성하고 아래와 같이 코드를 작성해주세요.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="phone-container">
    <div class="bell"></div>
    <div class="phone"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

2. CSS 작성하기

다음으로, CSS 파일을 생성하고 아래와 같이 코드를 작성해주세요. 이 코드는 전화벨 애니메이션의 스타일을 정의하는 역할을 합니다.

.phone-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.bell {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border: 2px solid #000;
  border-bottom: none;
  border-radius: 50%;
}

.phone {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 80px;
  background-color: #000;
  border-radius: 10px;
}

.ringing {
  animation: bell-ring 0.5s infinite alternate;
}

@keyframes bell-ring {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

3. JavaScript 작성하기

이제, JavaScript 파일을 생성하고 아래와 같이 코드를 작성해주세요. 이 코드는 클릭 이벤트가 발생했을 때 전화벨 애니메이션을 시작하는 역할을 합니다.

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

bell.addEventListener('click', () => {
  bell.classList.add('ringing');
  setTimeout(() => {
    bell.classList.remove('ringing');
  }, 500);
});

4. 실행해보기

위의 모든 파일을 생성한 후, 웹 브라우저에서 HTML 파일을 열어서 결과를 확인해보세요. 전화벨을 클릭하면 애니메이션이 시작되고, 0.5초 후에 애니메이션이 종료됩니다.

이렇게 자바스크립트를 사용하여 전화벨이 울리는 애니메이션을 만들 수 있습니다.

“#javascript” “#animation”

1. HTML 작성하기

2. CSS 작성하기

3. JavaScript 작성하기

4. 실행해보기

참고 자료