Curtain / Panel Wipe (커튼 / 패널 와이프)

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

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

포인터를 올리면 배경이 가운데나 가장자리에서 셔터처럼 열리거나 닫힙니다.

[적용할 곳]에 셔터 필(Shutter Fill) 호버 효과를 넣어 줘. 셔터(shutter)라고도 불러.
새 배경색이 가운데 세로선에서 양옆으로 셔터처럼 열리고, 포인터가 벗어나면 다시 가운데로 닫히게 해 줘. 그동안 글자색은 읽기 좋게 바뀌어야 해. 부드럽고 빠르게.
채우기는 요소 안쪽에서만 보이게 잘라 주고 글자는 그 위에 두고, 키보드 포커스에도 같은 효과를 보여 줘.

clip-path나 마스크가 가장자리나 한 점에서 넓어지며 이미지나 텍스트를 차츰 드러냅니다.

[적용할 곳]에 클립 리빌(Clip Reveal) 등장 효과를 넣어 줘. 마스크 리빌(mask reveal), 와이프 리빌(wipe reveal), 이미지 리빌(image reveal)이라고도 불러.
잘라 내는 경계선이 왼쪽에서 오른쪽으로 쓸고 지나가며, 내용은 가만히 있는 채로 차츰 드러나게 해 줘. 매끄럽게, 시작과 끝은 부드럽게.
아무것도 밀리지 않게 처음부터 요소 자리를 잡아 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전부 드러난 상태로 보여 줘.

덮개가 줄어들거나 마스크 가장자리가 넓어지면서 이미지가 드러납니다.

[적용할 곳]에 이미지 리빌 와이프(Image Reveal Wipe)를 넣어 줘. 마스크 리빌(mask reveal), 클립 패스 리빌(clip-path reveal)이라고도 불러.
이미지가 스크롤로 화면에 들어오면 덮개가 한쪽에서 걷히며 스크롤에 맞춰 부드럽게 이미지를 드러내게 해 줘. 화면을 벗어나기 한참 전에 완전히 보이도록.
레이아웃이 튀지 않게 이미지 자리를 미리 잡아 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 이미지를 처음부터 다 보여 줘.

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

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

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

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