Crossfade Page Transition (크로스페이드 페이지 트랜지션)

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

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

나가는 콘텐츠가 완전히 사라진 뒤, 들어오는 콘텐츠가 살짝 커지며 서서히 나타납니다.

[적용할 곳]에 페이드 스루(Fade Through) 페이지 전환을 넣어 줘. 페이드 스루 트랜지션(fade-through transition), 아웃 인 라우트 트랜지션(out-in route transition)이라고도 불러.
먼저 나가는 콘텐츠가 빠르게 완전히 사라지고, 그다음 들어오는 콘텐츠가 살짝 커지면서 제자리에 서서히 나타나게 해 줘.
둘이 절대 겹치지 않게 하고, 커지는 동안 들어오는 콘텐츠의 레이아웃이 밀리지 않게 해 줘.

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

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

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

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

단색 패널이 화면을 쓸고 지나가며 이전 페이지를 덮은 뒤, 물러나면서 새 페이지를 드러냅니다.

[적용할 곳]에 커튼 / 패널 와이프(Curtain / Panel Wipe) 페이지 전환을 넣어 줘. 페이지 와이프(page wipe), 스태거드 패널(staggered panels)이라고도 불러.
단색 패널이 하나씩 차례로 쓸고 들어와 이전 페이지를 덮고, 완전히 덮인 동안 페이지를 바꾼 뒤, 패널이 계속 화면 밖으로 빠져나가며 새 페이지를 드러내게 해 줘. 과감하고 매끄럽게.
패널이 이전 페이지를 다 덮기 전에는 새 페이지를 절대 보여 주지 말고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.

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

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