Scroll-Linked Animation (스크롤 연동 애니메이션)

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

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

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

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

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

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

문단의 단어가 스크롤에 따라 흐린 상태에서 완전히 선명한 상태로 바뀝니다.

[적용할 곳]에 텍스트 리빌(Text Reveal) 효과를 넣어 줘. 스크롤 텍스트 리빌(scroll text reveal), 단어별 리빌(word-by-word reveal)이라고도 불러.
문단은 흐리게 시작하고, 사용자가 스크롤하면 단어가 하나씩 차례로 온전히 선명해지게, 스크롤 위치에 맞춰 연결해 줘.
다시 위로 스크롤하면 단어가 도로 흐려지게 하고, 흐린 정도와 상관없이 문단 전체를 스크린 리더가 읽을 수 있게 해 줘.

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

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

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

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