트레일 애니메이션은 요소가 움직이는 동안 뒤 따르는 끄적끄적한 효과를 주는 애니메이션입니다. 이번 글에서는 CSS와 자바스크립트를 사용하여 간단한 트레일 애니메이션을 만드는 방법을 알아보겠습니다.

1. HTML 구조 만들기

먼저, HTML 구조를 만들어야 합니다. 이 예시에서는 container라는 클래스를 가진 div 요소 안에 dot이라는 클래스를 가진 여러 개의 div 요소를 넣을 것입니다. 이들은 트레일 효과를 나타내는 점들입니다. 아래는 예시 코드입니다.

<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <!-- ... 추가적인 dot 요소들 -->
</div>

2. CSS 스타일링 추가하기

이제 CSS로 점들과 컨테이너를 스타일링해야 합니다. 점의 크기, 색상, 위치 등을 설정해 주세요. 아래는 예시 코드입니다.

.container {
  position: relative;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}

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

트레일 애니메이션을 구현하기 위해 자바스크립트를 사용합니다. 우리는 점들을 마우스 커서의 위치로 이동시킬 것입니다. 아래는 예시 코드입니다.

const dots = document.querySelectorAll('.dot');
const container = document.querySelector('.container');

container.addEventListener('mousemove', (e) => {
  dots.forEach((dot) => {
    const { clientX, clientY } = e;
    const dotRect = dot.getBoundingClientRect();
    
    const dotX = dotRect.left + dotRect.width / 2;
    const dotY = dotRect.top + dotRect.height / 2;
    
    const dx = clientX - dotX;
    const dy = clientY - dotY;
    
    const distance = Math.sqrt(dx * dx + dy * dy);
    
    dot.style.transform = `translate(${dx}px, ${dy}px)`;
    dot.style.opacity = 1 - distance / 300;
  });
});

위의 코드는 컨테이너 요소에 마우스 이벤트 리스너를 추가하여 마우스가 움직일 때마다 각 점의 위치와 투명도를 계산하여 설정합니다.

4. 결과 확인하기

이제 모든 준비가 끝났습니다. 웹 브라우저에서 HTML 파일을 열고 마우스를 움직여보세요. 점들이 마우스 커서를 따라 움직이며 뒤에 남은 트레일 효과를 확인할 수 있습니다.

마무리하며

이번에는 CSS와 자바스크립트를 이용하여 트레일 애니메이션을 만드는 방법을 알아보았습니다. 이를 응용하여 다양한 애니메이션 효과를 만들어 볼 수 있으니 창의력을 발휘해보세요!

#CodeWithTrailAnimation #CSS #JavaScript