티스토리 콘텐츠가 서서히 등장하는 Fade-in 효과 추가하기

티스토리 블로그를 운영하면서 콘텐츠의 시각적 효과를 높이는 것은 독자의 관심을 끌고, 블로그의 전반적인 품질을 향상하는 데 중요한 요소입니다. 이번 글에서는 스크롤에 따라 이미지와 같은 콘텐츠가 서서히 등장하는 Fade-in 기능을 추가하는 방법에 대해 설명하겠습니다. 이 기능은 블로그의 사용자 경험을 개선하고, 방문자에게 더 매력적인 콘텐츠를 제공할 수 있습니다.

Fade-in 효과란?

Fade-in 효과는 콘텐츠가 화면에 나타날 때 서서히 불투명해지는 시각적 효과입니다. 이 효과는 사용자가 스크롤할 때 콘텐츠가 자연스럽게 등장하도록 하여, 블로그의 디자인을 더욱 세련되게 만들어 줍니다. 특히 이미지나 텍스트 블록에 적용하면, 독자의 시선을 끌고 콘텐츠에 대한 흥미를 유도할 수 있습니다.

Fade-in 효과 적용하기

1. CSS 코드 추가

Fade-in 효과를 적용하기 위해서는 CSS와 JavaScript를 사용해야 합니다. 먼저, CSS를 통해 초기 상태를 설정하고, JavaScript를 통해 스크롤 이벤트에 반응하도록 합니다. 아래의 CSS 코드를 티스토리 블로그의 HTML 편집기에서 css에 추가하세요.

/* 이미지 스크롤 효과 */
figure.imageblock,
#tt-body-page figure.imageblock,
.image-container {
    opacity: 0; /* 초기 상태: 불투명도 0 */
    transition: opacity 0.5s ease-in-out; /* 불투명도 변화에 대한 애니메이션 효과 */
}

.fade-in {
    opacity: 1; /* 불투명도 1로 변경 */
}

2. JavaScript 코드 추가

이제 JavaScript를 사용하여 스크롤 이벤트에 따라 Fade-in 효과를 적용할 수 있도록 합니다. 아래의 코드를 head안에 추가하세요.

<script>
document.addEventListener("DOMContentLoaded", function() {
    const fadeElements = document.querySelectorAll("figure.imageblock, #tt-body-page figure.imageblock, .image-container");

    function fadeInOnScroll() {
        const windowHeight = window.innerHeight;
        fadeElements.forEach(function(element) {
            const elementTop = element.getBoundingClientRect().top;
            if (elementTop < windowHeight) {
                element.classList.add("fade-in"); // 요소가 화면에 들어오면 fade-in 클래스 추가
            }
        });
    }

    window.addEventListener("scroll", fadeInOnScroll);
    fadeInOnScroll(); // 페이지 로드 시에도 효과 적용
});
</script>

3. 코드 설명

• CSS: 초기 상태에서 모든 이미지 블록과 컨테이너의 불투명도를 0으로 설정하고, transition 속성을 통해 불투명도가 변화할 때 애니메이션 효과를 추가합니다.
• JavaScript:
  • DOMContentLoaded 이벤트를 사용하여 DOM이 완전히 로드된 후 스크립트를 실행합니다.
  • fadeInOnScroll 함수는 각 요소의 위치를 확인하고, 화면에 들어오면 fade-in 클래스를 추가하여 불투명도를 1로 변경합니다.
  • scroll 이벤트 리스너를 추가하여 사용자가 스크롤할 때마다 fadeInOnScroll 함수를 호출합니다.
  • 페이지가 로드될 때도 한 번 호출하여 초기 상태에서 이미 보이는 요소에 대해서도 효과를 적용합니다.

적용 후 확인하기

위의 코드를 모두 추가한 후, 블로그를 새로고침하여 스크롤할 때 이미지와 콘텐츠가 서서히 나타나는지 확인해 보세요. 이 효과는 블로그의 시각적 매력을 높이고, 독자에게 더 나은 경험을 제공할 것입니다.

결론

Fade-in 효과는 블로그 콘텐츠를 더욱 매력적으로 만들어주는 유용한 기능입니다. 간단한 CSS와 JavaScript 코드를 통해 손쉽게 적용할 수 있으며, 독자의 관심을 끌고 블로그의 품질을 높이는 데 기여할 수 있습니다. 이번 기회를 통해 여러분의 티스토리 블로그에 Fade-in 기능을 추가해 보세요. 블로그의 디자인과 사용자 경험이 한층 더 향상될 것입니다.