[javascript] 자바스크립트로 페이드 인/아웃 애니메이션을 적용할 수 있는 블러 효과

14 Dec 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 페이드 인/아웃 애니메이션을 적용하여 이미지에 블러 효과를 생성하는 방법에 대해 알아보겠습니다.

필요한 기술

HTML/CSS
자바스크립트

알고리즘 개요

HTML에 이미지를 표시하는 요소를 추가합니다.
CSS를 사용하여 이미지에 초기 블러 효과를 적용합니다.
자바스크립트를 사용하여 페이드 인/아웃 애니메이션을 적용하여 블러 효과를 만듭니다.

코드 예시

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Blur Effect</title>
</head>
<body>
  <div class="image-container">
    <img src="image.jpg" alt="Image">
    <div class="overlay"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.image-container {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  transition: background-color 0.5s;
}

img {
  display: block;
  width: 100%;
  height: auto;
  filter: blur(10px);
  transition: filter 0.5s;
}

자바스크립트 (script.js)

const overlay = document.querySelector('.overlay');
const image = document.querySelector('img');

overlay.addEventListener('mouseenter', () => {
  overlay.style.backgroundColor = 'rgba(255, 255, 255, 0)';
  image.style.filter = 'blur(0px)';
});

overlay.addEventListener('mouseleave', () => {
  overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
  image.style.filter = 'blur(10px)';
});

이제 위의 코드를 통해 이미지에 마우스를 올리면 페이드 인/아웃 애니메이션을 통해 블러 효과가 적용되는 것을 확인할 수 있습니다.

마치며

이렇게 자바스크립트의 이벤트 리스너와 CSS의 트랜지션을 활용하여 페이드 인/아웃 애니메이션을 적용하여 이미지에 블러 효과를 만들어 보았습니다. 자바스크립트와 CSS를 활용하여 다양한 시각적 효과를 구현할 수 있으니 창의적으로 활용해보시기 바랍니다.

참고문헌: