Slide Page Transition (슬라이드 페이지 트랜지션)

나가는 콘텐츠와 들어오는 콘텐츠가 X, Y, Z 축 중 하나를 따라 함께 움직이며 페이드되어 공간적 관계를 보여 줍니다.

[적용할 곳]에 셰어드 액시스(Shared Axis) 페이지 전환을 넣어 줘. shared axis X/Y/Z라고도 불러.
앞으로 갈 때는 이전 콘텐츠가 한쪽으로 조금 밀려나며 빠르게 사라지고, 새 콘텐츠가 반대쪽에서 밀려 들어오며 바로 뒤이어 나타나게 해 줘. 뒤로 갈 때는 방향을 반대로.
방향만 느껴질 정도로 이동 거리를 짧게 하고, 축은 탐색 방식에 맞춰 줘. 같은 계층은 가로, 단계는 세로, 깊이 들어갈 때는 앞뒤 방향으로.

슬라이드가 보이는 영역을 가로로 지나가며 한 장씩 제자리에 딱 맞춰집니다.

[적용할 곳]에 캐러셀 슬라이드(Carousel Slide)를 넣어 줘. 슬라이더(slider), 스와이프 캐러셀(swipe carousel)이라고도 불러.
한 단계마다 줄이 옆으로 밀려 다음 슬라이드가 가운데에 딱 맞춰지게 해 줘. 부드럽게 감속하고, 양옆 가장자리에 이웃 슬라이드가 살짝 보이고, 위치 점도 함께 따라가게.
한 번에 한 장씩 넘기고, 버튼과 방향키뿐 아니라 터치 스와이프도 지원하고, 컨트롤에는 스크린 리더용 라벨을 달아 줘.

사이드 패널이 왼쪽, 오른쪽, 위쪽 가장자리에서 밀려 들어오며 콘텐츠를 밀어내거나 덮습니다.

[적용할 곳]에 드로어 슬라이드(Drawer Slide)를 넣어 줘. 오프캔버스(off-canvas), 사이드 시트(side sheet)라고도 불러.
뒤쪽 페이지가 어두워지는 동안 패널이 옆 가장자리에서 콘텐츠 위로 빠르게 밀려 들어오며 부드럽게 감속하고, 닫을 때는 같은 방식으로 빠져나가게 해 줘.
열린 드로어 안에 키보드 포커스를 가두고, Escape 키나 어두운 영역 클릭으로 닫히게 하고, 닫으면 드로어를 연 버튼으로 포커스를 돌려줘.

이전 페이지가 서서히 사라지는 동안 새 페이지가 같은 자리에 서서히 나타납니다.

[적용할 곳]에 크로스페이드 페이지 트랜지션(Crossfade Page Transition)을 넣어 줘. 크로스 디졸브(cross-dissolve), 페이드 트랜지션(fade transition)이라고도 불러.
페이지를 이동하면 이전 페이지가 서서히 사라지는 동시에 새 페이지가 같은 자리에 서서히 나타나게 해 줘. 부드럽고 꽤 빠르게.
페이드 중에 아무것도 밀리지 않게 두 페이지를 같은 위치에 두고, 전환 뒤에는 새 페이지의 주 제목으로 포커스를 옮겨 줘.

이전 페이지가 커지거나 작아지며 사라지는 동안 새 페이지가 크기를 바꾸며 제자리에 자리 잡습니다.

[적용할 곳]에 줌 페이지 트랜지션(Zoom Page Transition)을 넣어 줘. 스케일 트랜지션(scale transition), 줌 인 / 아웃(zoom in / out)이라고도 불러.
안으로 들어갈 때는 이전 페이지가 살짝 커지며 사라지고 새 페이지가 조금 작은 크기에서 커지며 자리 잡게 하고, 돌아올 때는 반대로 줌 아웃되게 해 줘. 부드럽고 빠르게.
내용이 내내 읽힐 수 있게 크기 변화는 은은하게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.

클릭한 지점에서 퍼져 나가는 원 안으로 새 화면이 드러납니다.

[적용할 곳]에 서큘러 리빌(Circular Reveal) 전환을 넣어 줘. 클립 패스 원 확장(clip-path circle expand), 테마 전환 리빌(theme toggle reveal)이라고도 불러.
누른 컨트롤에서 원이 바깥으로 커지며 그 안에 새 화면이 드러나 전체 영역을 덮게 해 줘. 부드럽고 일정하게, 시작과 끝은 완만하게.
원은 컨트롤을 누른 바로 그 자리에서 시작하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 원 없이 바로 바뀌게 해 줘.