scroll-margin 속성과 scroll-behavior CSS를 사용하면 부드럽고 접근성이 좋은 애니메이션을 만들 수 있습니다.

HTML : 

 <!-- Navigation with anchor links -->
     <nav style="position:fixed; top:10px; left:10px;">
        <a href="#section1">영카트다국어</a>
        <a href="#section2">그누보드다국어</a>
        <a href="#section3">다단계솔루션</a>
        <a href="#section4">그누보드SSO</a>
    </nav>

    <!-- Section 1 -->
    <section id="section1">
        <h2>영카트다국어</h2>
    </section>

    <!-- Section 2 -->
    <section id="section2">
        <h2>그누보드다국어</h2>
    </section>

    <!-- Section 3 -->
    <section id="section3">
        <h2>다단계솔루션</h2>
    </section>

    <!-- Section 4 -->
    <section id="section4">
        <h2>그누보드SSO</h2>
    </section>

CSS : 

html {
    scroll-behavior: smooth;
}

/* Remove body margins */
body {
    margin: 0;
}

/* Full viewport height for sections with centered content */
section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    transition: background-color 0.6s ease-in-out;
}

/* Styling for headings */
section h2 {
    font-size: 36px;
    margin: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    transform: translateY(30px);
}

/* Add margin for scroll snapping */
section:nth-child(odd) {
    background-color: #ffcccb;
}

section:nth-child(even) {
    background-color: #d0e7ff;
}

/* Scroll-triggered animation */
section:target h2 {
    opacity: 1;
    transform: translateY(0);
}

웹학교 무료강좌 / 웹학교 컨텐츠몰

PHP포탈 / 구인구직 솔루션

By 웹학교