티스토리 스크롤 효과 애니메이션 구현

스크롤 시 애니메이션 효과 구현

스크롤을 내리면서 화면에 특정 섹션이 보일 때, 해당 섹션에 애니메이션 효과를 적용하는 방법을 설명합니다. 이 방법은 주로 CSS와 JavaScript를 이용해 구현됩니다. 특정 요소가 화면에 보일 때 자연스럽게 나타나는 효과를 주기 위해 CSS의 opacity와 transform 속성을 사용하며, 스크롤 이벤트에 따라 JavaScript로 애니메이션을 제어합니다.

1. 스크롤 시 애니메이션 효과 구현

먼저, HTML 구조와 CSS를 사용하여 스크롤 시 애니메이션을 추가하는 방법을 설명합니다. 이 예시에서는 여러 개의 섹션을 구성하고, 각 섹션이 화면에 보일 때 애니메이션 효과가 적용됩니다.

스크롤 내릴 시 섹션이 나타난다

HTML:

<div class="content">
    <div class="section" id="section1">섹션 1</div>
    <div class="section" id="section2">섹션 2</div>
    <div class="section" id="section3">섹션 3</div>
    <div class="section" id="section4">섹션 4</div>
</div>

CSS:

/* 기본 스타일 */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.content {
    display: flex;
    flex-direction: column;
    height: 150vh; /* 화면보다 긴 높이 */
}

/* 각 섹션 기본 스타일 */
.section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    background-color: #f1f1f1;
    margin-bottom: 10px;
    opacity: 0; /* 초기에는 보이지 않음 */
    transform: translateY(50px); /* 아래로 이동 */
    transition: opacity 0.5s, transform 0.5s; /* 애니메이션 효과 */
}

/* 애니메이션 효과가 적용된 클래스 */
.section.visible {
    opacity: 1;
    transform: translateY(0); /* 원래 위치로 돌아오기 */
}

JavaScript:

window.addEventListener('scroll', function() {
    const sections = document.querySelectorAll('.section');
    
    sections.forEach(function(section) {
        const sectionPosition = section.getBoundingClientRect().top;
        const screenPosition = window.innerHeight / 1.5; // 화면의 1.5배 길이만큼 스크롤한 후 효과 발생

        // 섹션이 화면에 보일 때 "visible" 클래스 추가
        if (sectionPosition < screenPosition) {
            section.classList.add('visible');
        } else {
            section.classList.remove('visible');
        }
    });
});

2. 동작 설명:

이 코드에서는 각 섹션이 처음에는 보이지 않게 설정되어 있으며, 스크롤을 내릴 때 섹션이 화면에 보이면 visible 클래스를 추가해 애니메이션을 적용합니다. 이때 opacity 속성과 transform 속성을 사용하여 부드럽게 섹션이 나타나게 됩니다.

스크롤 이벤트가 발생하면 JavaScript에서 각 섹션의 위치를 확인하여, 화면에 섹션이 보일 때만 애니메이션을 실행하도록 설정됩니다. 이는 성능을 최적화하고, 불필요한 애니메이션을 방지하는 방법입니다.

3. 효과 설명:

이 애니메이션 효과는 섹션이 화면에 나타날 때마다 자연스럽게 변화를 주기 위해 사용됩니다. 초기 상태에서 섹션은 화면 아래로 위치하고, opacity와 transform을 조정하여 스크롤 시 부드럽게 올라오면서 나타나는 효과를 구현합니다.

4. 응용:

이 방법을 활용하면 다양한 요소에 스크롤 효과를 적용할 수 있습니다. 예를 들어, opacity나 transform 외에도 scale, rotate, skew 등을 사용해 더 다양한 애니메이션 효과를 구현할 수 있습니다.

또한, 여러 종류의 스크롤 이벤트와 결합하여 더욱 다채로운 애니메이션을 만들 수 있습니다.

저작자표시 비영리 변경금지

편집광네트워크