CSS와 자바스크립트를 이용한 반응형 애니메이션 만들기

18 Oct 2023

javascript

안녕하세요! 이번에는 CSS와 자바스크립트를 이용하여 반응형 애니메이션을 만드는 방법에 대해 알아보겠습니다. 반응형 애니메이션은 웹페이지가 다양한 환경에서 유연하게 동작할 수 있도록 해주는 중요한 요소입니다.

1. CSS @keyframes를 이용한 애니메이션 생성

CSS의 @keyframes 룰을 이용하여 애니메이션을 생성할 수 있습니다. 이를 통해 애니메이션의 시작과 끝, 그리고 중간 단계들을 정의할 수 있습니다. 예를 들어, 다음 코드는 회전하는 애니메이션을 만드는 예시입니다.

@keyframes rotating {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

위 코드에서 rotating이라는 이름의 애니메이션을 정의하고, 0%부터 시작하여 360도의 회전값까지 변화하는 애니메이션을 생성하였습니다.

2. CSS를 이용한 애니메이션 적용

애니메이션을 생성했다면, 원하는 요소에 해당 애니메이션을 적용할 수 있습니다. 다음은 애니메이션을 적용하는 방법에 대한 예시입니다.

animation: rotating 2s infinite linear;

위 코드는 rotating 애니메이션을 2초 동안 무한 반복하여 적용하는 것을 의미합니다. 만약 애니메이션을 한 번만 실행하고 싶다면 infinite 대신 1을 작성하면 됩니다.

3. 자바스크립트를 이용한 반응형 애니메이션

CSS로 애니메이션을 생성하고 적용하는 것만으로도 멋진 효과를 만들 수 있지만, 자바스크립트를 이용하여 반응형 요소를 동적으로 제어하는 것도 가능합니다. 예를 들어, 브라우저 창의 크기에 따라 다른 애니메이션을 보여주거나, 사용자의 동작에 따라 애니메이션을 제어할 수 있습니다.

const element = document.querySelector('.my-element');

window.addEventListener('scroll', () => {
  if (window.scrollY > 500) {
    element.classList.add('animate');
  } else {
    element.classList.remove('animate');
  }
});

위 코드는 페이지 스크롤이 500px 이상 이동할 때 .my-element 요소에 animate 클래스를 추가하고, 그렇지 않은 경우에는 animate 클래스를 제거하는 예시입니다. 이를 사용하여 스크롤에 따라 요소의 애니메이션을 제어할 수 있습니다.

마무리

위에서는 CSS와 자바스크립트를 이용하여 반응형 애니메이션을 만드는 방법에 대해 알아보았습니다. CSS의 @keyframes를 이용하여 애니메이션을 생성하고, 요소에 animation 속성을 통해 적용하며, 자바스크립트를 이용하여 동적인 제어도 가능합니다. 이를 통해 다양한 환경에서 멋진 사용자 경험을 제공할 수 있습니다.

Keywords: CSS, 자바스크립트, 반응형, 애니메이션

참고 자료:

CSS Animations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations
CSS @keyframes Rule: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
Element.classList: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList