소개

이번 블로그 포스트에서는 자바스크립트를 사용하여 화면이 모이는 애니메이션을 만드는 방법에 대해 알아보겠습니다.

구현 방법

1. HTML 구조 생성하기

   <div id="container">
     <div id="box1"></div>
     <div id="box2"></div>
     <div id="box3"></div>
   </div>
   

2. CSS 스타일 설정하기

   #container {
     width: 300px;
     height: 400px;
     position: relative;
   }
   
   .box {
     width: 50px;
     height: 50px;
     position: absolute;
     background-color: blue;
     border-radius: 50%;
   }
   

3. 자바스크립트 코드 작성하기

   const boxes = document.querySelectorAll('.box');
   
   function animate() {
     boxes.forEach((box, index) => {
       setTimeout(() => {
         box.style.transform = 'scale(1)';
       }, 100 * index);
     });
   }
   
   animate();
   

동작 설명

위의 코드는 화면 상에 3개의 원형 박스를 생성하고, 자바스크립트를 사용하여 박스들이 차례로 모이는 애니메이션을 만듭니다. animate 함수는 박스를 순회하면서 일정한 간격으로 setTimeout을 사용하여 각 박스의 크기를 점차 확대시키는 transform 스타일을 적용합니다. 이를 통해 박스들이 화면 가운데로 모여드는 효과를 얻을 수 있습니다.

결론

위의 자바스크립트 코드를 사용하여 화면이 모이는 애니메이션을 구현할 수 있습니다. 이를 응용하여 다양한 애니메이션 효과를 만들어 나갈 수 있으며, CSS를 조합하여 보다 다채로운 디자인을 구현할 수도 있습니다.

• #자바스크립트 #애니메이션