플로팅 애니메이션은 웹사이트나 앱에서 아이템이 부드럽게 움직이는 효과를 주는 인기 있는 기술입니다. 이번 튜토리얼에서는 CSS와 자바스크립트를 사용하여 플로팅 애니메이션을 만드는 방법을 알아보겠습니다.

1. HTML 구조 설정하기

먼저, 플로팅 애니메이션을 적용할 아이템을 감싸는 <div> 요소를 생성합니다. 예를 들어, 다음과 같은 구조를 사용할 수 있습니다:

<div class="floating-container">
  <div class="floating-item"></div>
</div>

위의 코드에서 .floating-container는 아이템을 감싸는 컨테이너 요소이며, .floating-item은 움직일 아이템입니다. 이 구조를 통해 애니메이션을 적용할 수 있습니다.

2. CSS를 사용한 애니메이션 효과 설정하기

CSS를 사용하여 플로팅 애니메이션 효과를 설정합니다. 다음은 예시입니다:

@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

.floating-item {
  animation: floating 3s ease-in-out infinite;
}

위의 코드에서 @keyframes를 사용하여 floating이라는 이름의 애니메이션 키프레임을 정의합니다. 0%, 50%, 100%에서 이동할 거리를 지정하여 아이템이 위로 약간 올라갔다가 다시 내려오는 효과를 생성합니다.

.floating-item 클래스에 animation 속성을 추가하여 floating 애니메이션을 적용합니다. 3s는 애니메이션의 지속 시간을 나타내며, ease-in-out은 천천히 가속된 다음 천천히 감속되는 애니메이션 효과를 적용합니다. infinite는 애니메이션을 반복하도록 설정합니다.

3. 자바스크립트를 사용한 플로팅 액션 추가하기

플로팅 액션을 자바스크립트를 사용하여 추가할 수 있습니다. 예를 들어, 마우스 호버 이벤트를 통해 애니메이션을 멈추고 다시 시작하는 기능을 구현할 수 있습니다. 다음은 예시입니다:

const floatingItem = document.querySelector(".floating-item");

floatingItem.addEventListener("mouseover", () => {
  floatingItem.style.animationPlayState = "paused";
});

floatingItem.addEventListener("mouseout", () => {
  floatingItem.style.animationPlayState = "running";
});

위의 코드에서 .floating-item에 대한 참조를 가져와 마우스 호버 이벤트를 감지하고, 호버 상태에 따라 animationPlayState 속성을 조작하여 애니메이션을 일시정지하거나 다시 시작합니다.

마무리

CSS와 자바스크립트를 사용하여 플로팅 애니메이션을 만들 수 있습니다. 앞서 설명한 방법을 참고하여 원하는 디자인과 상호작용을 가진 동적인 애니메이션을 구현해보세요. 플로팅 애니메이션은 웹사이트나 앱에서 시각적으로 돋보이는 효과를 주어 사용자 경험을 향상시킬 수 있는 강력한 기술입니다.

더 많은 정보를 원하신다면 다음 참고 자료를 확인해보세요:

• CSS 애니메이션 소개
• CSS 애니메이션 예제
• 자바스크립트 이벤트 처리
• 자바스크립트 애니메이션 API

#webdevelopment #animation