[퍼블리싱] Sticky 헤더 애니메이션: 슬라이드 업/다운 효과 구현하기

 

안녕하세요 찐망고입니다.

오늘도 클론 프로젝트를 하던 중 귀찮지만 막상 구현하면 보기 좋은 헤더 애니메이션

작업과정을 공유해 드릴 건데요.
디테일은 귀찮아서 못하는 거지 막상 하면 만족도가 높..

조만간 이런 공유들을 영상으로 보여드리고 싶은데.. (말만 몇 년째)

 

해당사이트 학생이 클론작업한 링크입니다 (3개월 유지예정)

KRDS

 

 

KRDS 클론 코딩

 

 

이 애니메이션의 핵심은 헤더를 줄이거나 헤더를 이동하는 게 아니고

전체적인 콘텐츠를 위로 당긴다고 생각하면 되는데요

처음 스크롤할 때 배너가 사라지고 헤더가 fixed처리되는건 CSS sticky로 처리하면 되고

position: sticky가 안 돼요? 안 되는 이유 & 해결법

 

이후 스크롤 할때 헤더가 사라지는 건 전체 콘텐츠가 위로 올라간다고 생각하면 됩니다.

이후 다시 위로 올라가면 콘텐츠가 내려오면서

자연스럽게 배너와 헤더가 보이는 거죠.

 

HTML코드

<div id="conatainer">
	<div class="banner01">...</div>
    <header>...</header>
    ...
</div>

 

CSS코드

/* body animation  */
body {    
    transform: translateY(0); 
    transition: transform 0.4s ease-in-out;
}

body.scroll {
    transform: translateY(-140px);  
}

header {
    position: sticky;
    top: 0;
    width: 100%;
}

 

JAVASCRIPT코드

let lastScrollY = 0; // 이전 스크롤 위치를 저장하는 변수
let ticking = false; // 현재 스크롤 위치와 비교하여 스크롤 방향 판단

function handleScrollDirection() {
    if (!ticking) { // 이미 실행 중이라면 중복 호출 방지
        requestAnimationFrame(() => { // 브라우저가 화면을 업데이트 하기전에 한번만 실행되도록 함  
            const body = document.body;
            const scrollY = window.scrollY; // 현재스크롤위치

            if (scrollY > 150 && scrollY > lastScrollY) { // 150px이상 스크롤 했고, 아래로 스크롤 중이면 scroll클래스 추가
                body.classList.add("scroll");
            } else {
                body.classList.remove("scroll");
            }

            lastScrollY = scrollY; // 현재 스크롤 위치저장
            ticking = false; // 다음 프레임에서 다시 실행할 수 있도록 초기화
        });
        ticking = true; // 애니메이션 프레임 요청중임을 표시
    }
}

window.addEventListener("scroll", handleScrollDirection);

 

포인트만 잘 잡으면 코드는 쉬운데, 포인트를 못 잡으면 삽질할 확률이 높아요

Ai는 여러분의 코드를 빠르고 편하게 짤 수 있게 도와주지만

질문 포인트를 잘 못 잡으면 같이 삽질을 합니다 🤣