Scroll

아래로 스크롤하면 헤더가 숨고, 위로 스크롤하면 다시 나타납니다.

[적용할 곳]에 스크롤 숨김 헤더(Hide on Scroll Header)를 넣어 줘. 헤드룸(headroom), 자동 숨김 내비바(auto-hide navbar)라고도 불러.
아래로 스크롤하면 헤더가 위로 미끄러져 사라지고, 조금이라도 위로 스크롤하면 다시 내려오게 해 줘. 빠르고 부드럽게, 거리 말고 방향에 반응하게.
페이지 맨 위에서는 항상 보이게 하고, 자잘한 스크롤 흔들림은 무시하고, 헤더 안의 요소에 키보드 포커스가 있는 동안에는 계속 보이게 해 줘.

세로 스크롤에 맞춰 고정된 패널 줄이 옆으로 움직입니다.

[적용할 곳]에 가로 스크롤 섹션(Horizontal Scroll Section)을 넣어 줘. horizontal scrolling, scroll-jacked horizontal gallery라고도 불러.
섹션이 화면 위에 닿으면 고정된 채로, 아래로 스크롤할 때 패널 줄이 옆으로 움직이고, 마지막 패널이 보이면 고정이 풀리게 해 줘.
옆 움직임은 스크롤 위치에 직접 연결해서 되돌려 스크롤하면 반대로 움직이게 하고, 작은 화면이거나 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 일반적인 스와이프 가능한 가로 줄로 보여 줘.

스크롤에 따라 레이어가 서로 다른 속도로 움직여 깊이감을 줍니다.

[적용할 곳]에 패럴랙스(Parallax) 스크롤 효과를 넣어 줘. 패럴랙스 스크롤링(parallax scrolling), 패럴랙스 레이어(parallax layers)라고도 불러.
페이지를 스크롤할 때 배경 레이어가 콘텐츠보다 느리게 움직이고, 멀리 있는 레이어일수록 덜 움직여서 은은한 깊이감을 주게 해 줘.
지연 없이 스크롤 위치에 맞춰 움직이고, 텍스트는 보통 속도 레이어에 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 효과를 꺼 줘.

특정 스크롤 구간 동안 요소가 제자리에 고정되고, 그동안 다른 콘텐츠나 애니메이션이 진행됩니다.

[적용할 곳]에 피닝(Pinning) 스크롤 효과를 넣어 줘. 핀 고정 섹션(pinned section), 스티키 섹션(sticky section)이라고도 불러.
옆의 콘텐츠가 스크롤로 지나가는 동안 패널 하나는 제자리에 고정해 두고, 읽고 있는 단계에 맞춰 내용이 바뀌다가 섹션이 끝나면 고정이 풀리게 해 줘.
스크롤을 가로채기보다 네이티브 sticky 포지셔닝을 우선 쓰고, 작은 화면에서는 고정 패널 없이도 각 단계가 잘 읽히게 해 줘.

페이지나 글을 스크롤하는 만큼 막대나 링이 채워집니다.

[적용할 곳]에 스크롤 진행 표시줄(Scroll Progress Indicator)을 넣어 줘. 읽기 진행 바(reading progress bar)라고도 불러.
위쪽의 얇은 막대가 스크롤한 만큼 왼쪽에서 오른쪽으로 채워지고, 끝까지 내리면 전체 너비가 되게 해 줘.
이징 지연 없이 스크롤 위치에 바로 연결하고, 콘텐츠를 가리지 않게 해 줘.

스크롤이 슬라이드나 섹션 같은 정해진 지점에 딱 맞춰 멈춥니다.

[적용할 곳]에 스크롤 스냅(Scroll Snap)을 넣어 줘. 스크롤 스내핑(scroll snapping), 스냅 스크롤링(snap scrolling)이라고도 불러.
스크롤이 멈추면 어중간한 곳에 서지 않고 가장 가까운 섹션의 가장자리에 딱 맞춰 자리 잡게 해 줘.
휠·터치·키보드 스크롤이 모두 그대로 되도록 브라우저 기본 스냅을 쓰고, 화면보다 긴 콘텐츠도 끝까지 읽을 수 있게 해 줘.

애니메이션 진행이 스크롤 위치에 바로 묶여 있어, 앞으로 스크롤하면 재생되고 뒤로 스크롤하면 되감깁니다.

[적용할 곳]에 스크롤 연동 애니메이션(Scroll-Linked Animation)을 넣어 줘. 스크롤 드리븐 애니메이션(scroll-driven animation), 스크롤 스크럽(scroll scrub)이라고도 불러.
애니메이션이 스크롤 위치에 정확히 맞춰 움직여서, 아래로 내리면 앞으로 재생되고 위로 올리면 그 자리에서 되감기게 해 줘. 시간 기반 이징은 따로 넣지 마.
애니메이션 전체를 분명한 스크롤 구간에 맞추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자연스러운 정지 상태를 보여 줘.

요소가 뷰포트에 들어오거나 나갈 때 애니메이션이 한 번 재생됩니다.

[적용할 곳]에 스크롤 트리거 애니메이션(Scroll-Triggered Animation)을 넣어 줘. 스크롤 리빌(reveal on scroll), 애니메이트 온 스크롤(animate on scroll)이라고도 불러.
각 항목이 화면에 들어올 때 한 번만 서서히 나타나며 위로 올라와 자리 잡게 해 줘. 스크롤 위치를 따라가지 말고 자체의 빠르고 부드러운 속도로 재생해 줘.
스크립트가 로드되지 않아도 콘텐츠가 보이게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 보여 줘.

스크롤과 앵커 이동이 뚝뚝 끊기지 않고 이징으로 부드럽게 미끄러집니다.

[적용할 곳]에 스무스 스크롤(Smooth Scroll)을 넣어 줘. 스무스 스크롤링(smooth scrolling), 관성 스크롤(inertia scroll)이라고도 불러.
스크롤과 앵커 이동이 뚝뚝 끊기지 않고 부드럽게 미끄러지다 멈추게 해 줘. 무겁게 늘어지지 않고 가볍고 반응이 빠른 느낌으로.
키보드 스크롤, 스크롤바, 페이지 내 찾기 같은 기본 동작은 그대로 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 부드러운 효과를 꺼 줘.

스크롤하면 카드가 위쪽에 붙은 채 차례로 겹쳐 쌓이고, 앞선 카드는 보통 조금씩 작아집니다.

[적용할 곳]에 스태킹 카드(Stacking Cards)를 넣어 줘. 스티키 스태킹 카드(sticky stacking cards), 카드 스택 스크롤(card stack scroll)이라고도 불러.
스크롤하면 각 카드가 위쪽 근처에 붙고 다음 카드가 그 위로 올라와 덮으면서, 아래 카드들은 살짝 작아져 가지런한 더미가 쌓이게 해 줘.
앞선 카드마다 가장자리가 얇게 보이게 남기고, 마지막 카드가 섹션이 끝나기 전에 제자리까지 올 수 있게 여유 공간을 줘.

아래로 스크롤하면 고정 헤더의 높이나 크기가 줄어듭니다.

[적용할 곳]에 스티키 헤더 축소(Sticky Header Shrink)를 넣어 줘. 슈링킹 헤더(shrinking header), 슈링크 온 스크롤(shrink on scroll)이라고도 불러.
헤더는 위쪽에 붙어 있다가, 조금 내려가면 로고가 작아진 얇은 바로 부드럽게 줄어들고, 맨 위로 돌아오면 다시 커지게 해 줘.
헤더 크기가 바뀌는 동안 아래 콘텐츠가 튀지 않게 해 줘.

페이지를 세로로 스크롤하면 큰 텍스트 줄이 가로로 미끄러집니다.

[적용할 곳]에 스크롤 텍스트 마퀴(Text Marquee on Scroll)를 넣어 줘. scroll text marquee,스크롤 벨로시티 텍스트(scroll velocity text)라고도 불러.
페이지를 아래로 내리면 큰 텍스트 줄이 옆으로 미끄러지고, 줄마다 번갈아 반대 방향으로 움직이며, 위로 올리면 되돌아가게 해 줘.
움직임은 스크롤 위치에 연결하고, 긴 줄 때문에 가로 스크롤바가 생기지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.

스크롤에 따라 요소나 장면이 커지거나 작아집니다.

[적용할 곳]에 스크롤 줌(Zoom on Scroll) 효과를 넣어 줘. scroll zoom, 스케일 온 스크롤(scale on scroll)이라고도 불러.
섹션이 화면에 머무는 동안 요소가 작은 카드에서 스크롤에 맞춰 부드럽게 커져 화면 전체를 채우고, 위로 올리면 다시 작아지게 해 줘.
주변 레이아웃을 밀어내지 않게 크기를 바꾸고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 줌 없이 최종 크기로 보여 줘.