자바스크립트 애니메이션 프레임을 활용한 마우스 호버 효과 만들기

18 Oct 2023

javascript

마우스 호버 효과를 만들 때 자바스크립트 애니메이션 프레임을 활용하면 더욱 동적이고 부드러운 효과를 구현할 수 있습니다. 이번 글에서는 자바스크립트를 사용하여 마우스 호버 효과를 만드는 방법을 알아보겠습니다.

🖱️ 마우스 호버 효과 만들기

우선 HTML 파일에 마우스 호버 효과를 적용할 요소를 생성합니다. 예를 들어 <div> 요소를 생성하고 hover-element라는 클래스를 추가합니다.

<div class="hover-element"></div>

다음으로 CSS 파일을 열고 hover-element 클래스에 기본적인 스타일을 추가합니다. 이 예시에서는 배경색과 크기, 가운데 정렬을 설정했습니다.

.hover-element {
  background-color: #ffcc00;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

이제 자바스크립트 파일을 열고 애니메이션 효과를 추가할 수 있습니다. 먼저 hover-element 요소를 선택하고 마우스가 요소 위로 진입했을 때와 떠날 때의 이벤트를 설정합니다.

const hoverElement = document.querySelector('.hover-element');

hoverElement.addEventListener('mouseenter', function() {
  // 마우스가 요소 위로 진입할 때 발생하는 이벤트
});

hoverElement.addEventListener('mouseleave', function() {
  // 마우스가 요소를 떠날 때 발생하는 이벤트
});

마우스가 요소 위로 진입할 때 발생하는 이벤트에서는 애니메이션을 시작하도록 구현해야합니다. 이를 위해 requestAnimationFrame() 함수를 사용합니다.

const hoverElement = document.querySelector('.hover-element');
let animationId;

hoverElement.addEventListener('mouseenter', function() {
  animationId = requestAnimationFrame(animateHover);
});

hoverElement.addEventListener('mouseleave', function() {
  cancelAnimationFrame(animationId);
});

function animateHover() {
  // 애니메이션을 적용할 요소에 대한 코드 작성
  // 요소의 스타일을 변경하여 움직이는 효과를 구현할 수 있습니다.

  // 다음 프레임을 위해 다시 애니메이션을 요청합니다.
  animationId = requestAnimationFrame(animateHover);
}

애니메이션 효과를 적용하기 위해 animateHover 함수 내에서 요소의 스타일을 변경합니다. 이 예시에서는 요소의 배경색을 랜덤한 색으로 변경하는 코드를 작성했습니다.

function animateHover() {
  const randomColor = '#' + Math.random().toString(16).slice(2, 8);
  hoverElement.style.backgroundColor = randomColor;

  animationId = requestAnimationFrame(animateHover);
}

이제 마우스를 요소 위로 올리면 배경색이 계속해서 변경되는 애니메이션 효과를 확인할 수 있습니다.

🔗 참고 자료

MDN 문서: requestAnimationFrame()

#JavaScript