Carousel Crossfade (캐러셀 크로스페이드)
다른 이름 Fade slideshow, Carousel fade
슬라이드가 옆으로 밀리지 않고 제자리에서 서로 스며들듯 바뀝니다.
쓰는 곳
히어로 슬라이드쇼, 고객 후기
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 캐러셀 크로스페이드(Carousel Crossfade)를 넣어 줘. 페이드 슬라이드쇼(fade slideshow), 캐러셀 페이드(carousel fade)라고도 불러.
슬라이드는 제자리에 있고 이전 것이 사라지는 동시에 다음 것이 나타나며 천천히 스며들듯 바뀌고, 다음 전환 전까지 몇 초간 머물게 해 줘.
첫 슬라이드로 끊김 없이 돌아가게 하고, 마우스를 올리거나 포커스가 가면 멈추고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 자동으로 넘기지 마.비슷한 모션
A
B
클릭해 보세요
Crossfade Page Transition (크로스페이드 페이지 트랜지션)
다른 이름 Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
이전 페이지가 서서히 사라지는 동안 새 페이지가 같은 자리에 서서히 나타납니다.
쓰는 곳
기본 라우트 전환
[적용할 곳]에 크로스페이드 페이지 트랜지션(Crossfade Page Transition)을 넣어 줘. 크로스 디졸브(cross-dissolve), 페이드 트랜지션(fade transition)이라고도 불러.
페이지를 이동하면 이전 페이지가 서서히 사라지는 동시에 새 페이지가 같은 자리에 서서히 나타나게 해 줘. 부드럽고 꽤 빠르게.
페이드 중에 아무것도 밀리지 않게 두 페이지를 같은 위치에 두고, 전환 뒤에는 새 페이지의 주 제목으로 포커스를 옮겨 줘.A
B
C
클릭해 보세요
Carousel Slide (캐러셀 슬라이드)
다른 이름 Slider, Swipe carousel, Scroll-snap carousel
슬라이드가 보이는 영역을 가로로 지나가며 한 장씩 제자리에 딱 맞춰집니다.
쓰는 곳
히어로 배너, 상품 갤러리
[적용할 곳]에 캐러셀 슬라이드(Carousel Slide)를 넣어 줘. 슬라이더(slider), 스와이프 캐러셀(swipe carousel)이라고도 불러.
한 단계마다 줄이 옆으로 밀려 다음 슬라이드가 가운데에 딱 맞춰지게 해 줘. 부드럽게 감속하고, 양옆 가장자리에 이웃 슬라이드가 살짝 보이고, 위치 점도 함께 따라가게.
한 번에 한 장씩 넘기고, 버튼과 방향키뿐 아니라 터치 스와이프도 지원하고, 컨트롤에는 스크린 리더용 라벨을 달아 줘.A
B
클릭해 보세요
Fade Through (페이드 스루)
다른 이름 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
나가는 콘텐츠가 완전히 사라진 뒤, 들어오는 콘텐츠가 살짝 커지며 서서히 나타납니다.
쓰는 곳
서로 관련 없는 화면 사이 전환
[적용할 곳]에 페이드 스루(Fade Through) 페이지 전환을 넣어 줘. 페이드 스루 트랜지션(fade-through transition), 아웃 인 라우트 트랜지션(out-in route transition)이라고도 불러.
먼저 나가는 콘텐츠가 빠르게 완전히 사라지고, 그다음 들어오는 콘텐츠가 살짝 커지면서 제자리에 서서히 나타나게 해 줘.
둘이 절대 겹치지 않게 하고, 커지는 동안 들어오는 콘텐츠의 레이아웃이 밀리지 않게 해 줘.ABCDE
끌어 보세요
Coverflow (커버플로)
다른 이름 Cover flow carousel
가운데 항목은 정면을 보고, 양옆 항목은 원근감 있게 비스듬히 돌아가 있습니다.
쓰는 곳
앨범·미디어 캐러셀
[적용할 곳]에 커버플로(Coverflow) 캐러셀을 넣어 줘. 커버 플로 캐러셀(cover flow carousel)이라고도 불러.
가운데 항목은 정면을 보고 양옆 항목은 원근감 있게 비스듬히 돌아가 있게 해 줘. 옆으로 드래그하면 줄이 밀리고, 손을 떼면 가장 가까운 항목에 부드럽게 멈추게.
드래그 말고도 방향키와 스와이프를 지원하고, 터치 기기에서 페이지 세로 스크롤이 계속 되게 해 줘.Component & Layout의 다른 모션
BC
A
A
클릭해 보세요
Container Transform (컨테이너 트랜스폼)
다른 이름 Card expand to detail, Expandable card, Morph card to page
카드가 전체 상세 화면으로 커지며, 보이는 컨테이너 하나가 모양을 바꾸면서 새 내용을 드러냅니다.
쓰는 곳
목록 카드에서 상세로, FAB에서 시트로
[적용할 곳]에 컨테이너 트랜스폼(Container Transform) 전환을 넣어 줘. 카드에서 상세로 펼치기(card expand to detail), 확장 카드(expandable card)라고도 불러.
카드를 열면 같은 컨테이너가 전체 상세 화면까지 부드럽게 커지고, 기존 내용은 빠르게 사라지고 거의 다 커졌을 때 새 내용이 나타나게 해 줘. 닫을 때는 거꾸로 재생해.
서로 다른 두 상자를 크로스페이드하지 말고 하나로 이어진 컨테이너로 보여 주고, 열리면 포커스를 상세 화면으로 옮겨 줘.- A
- B
- C
- D
끌어 보세요
Drag-to-Reorder List (드래그 순서 변경 리스트)
다른 이름 Reorder, Sortable list
항목을 끌면 나머지 항목이 비켜나듯 미끄러지며 새 순서로 자리 잡습니다.
쓰는 곳
칸반, 순서를 바꾸는 설정, 플레이리스트
[적용할 곳]에 드래그 순서 변경 리스트(Drag-to-Reorder List)를 넣어 줘. 정렬 가능한 리스트(sortable list)라고도 불러.
끄는 항목은 포인터를 바로 따라오며 살짝 떠오르고, 나머지 항목은 부드럽게 미끄러지며 비켜나게 해 줘. 놓으면 가장 가까운 자리에 빠르게 들어가게.
마우스뿐 아니라 터치도 지원하고, 키보드로 항목을 옮기는 방법도 넣어서 새 위치를 스크린 리더에 알려 줘.