많은 웹 사이트나 앱에서 블러 효과를 사용하여 유저 인터페이스를 더욱 흥미롭게 만들 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 간단한 블러 효과 애니메이션을 만드는 방법에 대해 알아보겠습니다.

HTML 요소 생성

먼저, HTML 요소를 생성하고 스타일을 지정해야 합니다. 아래의 코드는 블러 효과를 적용할 요소를 생성하는 예시입니다.

<div id="blur-element">
  <!-- 내용을 추가하세요 -->
</div>

자바스크립트로 블러 효과 생성하기

이제 자바스크립트를 사용하여 블러 효과를 생성할 수 있습니다. 아래의 코드는 선택한 요소에 블러 효과를 적용하는 예시입니다.

const element = document.getElementById('blur-element');
element.style.filter = "blur(10px)";

위의 코드를 사용하면 blur-element라는 id를 가진 요소를 선택하고 그 요소에 10px의 블러 효과를 적용합니다.

애니메이션 추가하기

블러 효과에 애니메이션을 추가하여 보다 부드럽고 시각적으로 흥미로운 효과를 만들 수 있습니다. 아래의 예시 코드는 자바스크립트를 사용하여 페이드 인 효과를 적용하는 방법을 보여줍니다.

const element = document.getElementById('blur-element');
element.style.filter = "blur(0px)";
element.style.transition = "filter 0.3s ease-in-out";

// 애니메이션 효과 적용
element.addEventListener('mouseenter', () => {
  element.style.filter = "blur(10px)";
});

// 애니메이션 해제
element.addEventListener('mouseleave', () => {
  element.style.filter = "blur(0px)";
});

위의 코드를 사용하면 마우스를 올렸을 때 요소에 블러 효과가 적용되고, 마우스를 떼면 효과가 사라집니다. transition 속성을 사용하여 애니메이션의 지속시간과 속도 곡선을 조정할 수 있습니다.

마치며

이번 포스트에서는 자바스크립트를 사용하여 블러 효과를 만들고 애니메이션을 추가하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 디자인 요소에 효과를 적용해보세요. 블러 효과를 통해 사용자 경험을 더욱 강화할 수 있습니다.

더 많은 자바스크립트 관련 정보는 MDN 자바스크립트 문서 를 참고하세요.

#javascript #블러효과