이번에는 자바스크립트를 사용하여 별 모양의 애니메이션을 만드는 방법을 알아보겠습니다.

1. HTML 구조 만들기

먼저, HTML 문서에는 별을 표시할 <div> 요소를 추가해야 합니다. 이 <div> 요소에 CSS를 적용하여 별의 모양을 만들어줄 것입니다.

<div class="star"></div>

2. CSS 스타일 적용하기

다음으로, CSS를 사용하여 별 모양을 만들어줍니다. <div> 요소에 star 클래스를 추가하고, width, height, border, transform 등의 속성을 사용하여 별 모양을 정의합니다.

.star {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 35px solid #f5d742;
  transform: rotate(35deg);
}

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

마지막으로, 자바스크립트를 사용하여 별이 움직이는 애니메이션을 추가해줍니다. setInterval 함수를 사용하여 일정한 간격으로 애니메이션을 반복시킬 수 있습니다.

function moveStar() {
  var star = document.querySelector('.star');
  var position = 0;
  
  setInterval(function() {
    if (position >= window.innerWidth) {
      position = -100;
    }
    
    position += 10;
    star.style.left = position + 'px';
  }, 100);
}

moveStar();

위의 코드에서는 moveStar 함수를 호출하여 애니메이션을 시작합니다. setInterval 함수 내부에서는 매번 position 값을 증가시키고, 이 값을 star 요소의 left 속성에 적용하여 별이 오른쪽으로 이동하도록 만듭니다. 만약 화면 오른쪽 끝에 도달하면 position 값을 초기화하여 애니메이션을 반복시킵니다.

마치며

별 모양의 애니메이션을 자바스크립트로 만드는 방법을 알아보았습니다. 이를 응용하여 다양한 형태의 애니메이션을 자바스크립트로 구현할 수 있습니다. 자바스크립트를 사용하여 동적이고 흥미로운 웹 요소를 구현하는 것은 웹 개발의 재미있는 부분 중 하나입니다. 새로운 도전에 도움이 되기를 바랍니다.

해시태그: #자바스크립트 #애니메이션