Fade Through (페이드 스루)

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

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

슬라이드가 옆으로 밀리지 않고 제자리에서 서로 스며들듯 바뀝니다.

[적용할 곳]에 캐러셀 크로스페이드(Carousel Crossfade)를 넣어 줘. 페이드 슬라이드쇼(fade slideshow), 캐러셀 페이드(carousel fade)라고도 불러.
슬라이드는 제자리에 있고 이전 것이 사라지는 동시에 다음 것이 나타나며 천천히 스며들듯 바뀌고, 다음 전환 전까지 몇 초간 머물게 해 줘.
첫 슬라이드로 끊김 없이 돌아가게 하고, 마우스를 올리거나 포커스가 가면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자동으로 넘기지 마.

요소가 제자리에서 완전히 투명한 상태에서 완전히 불투명하게 바뀌고, 사라질 때는 반대로 바뀝니다.

[적용할 곳]에 페이드 인 / 페이드 아웃(Fade In / Fade Out) 애니메이션을 넣어 줘. 페이드(fade)라고도 불러.
나타날 때는 요소가 제자리에서 완전히 투명한 상태에서 또렷하게 보이는 상태로 바뀌고, 사라질 때는 같은 방식으로 흐려지게 해 줘. 은은하게, 이동이나 크기 변화 없이.
사라진 뒤에는 클릭도 키보드 접근도 안 되게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 즉시 전환해 줘.

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

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

로고나 카운터가 있는 전체 화면 인트로 레이어가 미끄러지거나 서서히 사라지며 사이트를 드러냅니다.

[적용할 곳]에 프리로더 커튼 리프트(Preloader Curtain Lift)를 넣어 줘. 스플래시 화면(splash screen), 인트로 로더(intro loader)라고도 불러.
로딩 바가 차는 동안 전체 화면 인트로 레이어를 띄워 두었다가, 위로 부드럽게 밀려 올라가며 사라지고 아래의 사이트가 살포시 자리 잡으며 드러나게 해 줘.
첫 로딩 때만 재생하고, 실제 로딩 시간보다 오래 페이지를 붙잡지 말고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 건너뛰어 줘.

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

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

썸네일 같은 짝이 되는 요소가 다음 페이지로 넘어가며 위치와 크기가 자연스럽게 바뀝니다.

[적용할 곳]에 셰어드 엘리먼트 트랜지션(Shared Element Transition)을 넣어 줘. 히어로 트랜지션(hero transition), view-transition-name morph라고도 불러.
다음 페이지로 넘어갈 때 썸네일 같은 짝이 되는 요소가 새 페이지의 자기 자리로 부드럽게 이동하며 커지고, 나머지 콘텐츠는 크로스페이드되게 해 줘. 돌아올 때는 다시 작아지게.
두 페이지의 짝이 되는 요소에 같은 식별자를 줘서 제대로 짝지어지게 하고, 브라우저가 변형을 지원하지 않으면 단순한 크로스페이드로 대신해 줘.