Magnifier Lens (돋보기)
다른 이름 Lens, Loupe, Lens (Magnifier), Hover zoom lens
둥근 렌즈가 포인터를 따라다니며 이미지 일부를 확대해 보여 줍니다.
쓰는 곳
제품 상세 이미지
변형
- Lens
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 돋보기(Magnifier Lens)를 넣어 줘. 렌즈(lens), 루페(loupe)라고도 불러.
둥근 렌즈가 지연 없이 포인터 바로 아래에 놓이고, 그 아래 이미지 부분을 확대해 보여 주게 해 줘.
확대된 화면은 포인터 아래 정확한 지점과 어긋나지 않게 맞추고, 터치 기기에서는 손가락으로 이미지를 누르고 있는 동안 렌즈를 보여 줘.비슷한 모션
마우스를 올려 보세요
Hover Zoom (호버 줌)
다른 이름 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
포인터를 올리면 이미지가 틀 안에서 커지고, 때로는 포인터를 따라 이동합니다.
쓰는 곳
제품 카드, 썸네일
[적용할 곳]에 호버 줌(Hover Zoom) 효과를 넣어 줘. 이미지 줌 온 호버(image zoom on hover), 줌 팬(zoom-pan)이라고도 불러.
포인터가 이미지 위에 있는 동안 틀 크기는 그대로 두고 이미지가 틀 안에서 느리고 부드럽게 커지고, 벗어나면 부드럽게 돌아오게 해 줘.
이미지는 틀에 맞춰 잘라 레이아웃 밖으로 넘치지 않게 하고, 키보드 포커스에도 같은 줌을 보여 줘.- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
포인터를 움직여 보세요
Cursor Spotlight (커서 스포트라이트)
다른 이름 Flashlight cursor, Spotlight effect
포인터 주변의 빛의 원이 콘텐츠를 드러내고, 나머지는 어둡게 남습니다.
쓰는 곳
히어로 섹션, 드러내기 효과
[적용할 곳]에 커서 스포트라이트(Cursor Spotlight) 효과를 넣어 줘. 손전등 커서(flashlight cursor), 스포트라이트 효과(spotlight effect)라고도 불러.
부드러운 빛의 원이 포인터를 따라다니며 그 아래 콘텐츠를 드러내고, 나머지 영역은 어둡게 남게 해 줘.
따라갈 포인터가 없는 터치 기기에서는 대신 콘텐츠를 전부 밝게 보여 줘.- A
- B
- C
- D
ABCD
포인터를 움직여 보세요
Cursor Image Hover (커서 이미지 호버)
다른 이름 Hover image follow, Image preview on hover
텍스트 목록 항목에 마우스를 올리면 미리보기 이미지가 포인터를 따라다닙니다.
쓰는 곳
프로젝트 목록, 메뉴
[적용할 곳]에 커서 이미지 호버(Cursor Image Hover) 효과를 넣어 줘. 호버 이미지 팔로우(hover image follow), 호버 시 이미지 미리보기(image preview on hover)라고도 불러.
포인터가 텍스트 목록 항목 위에 있는 동안 그 항목의 작은 미리보기 이미지가 포인터 옆에 떠서 살짝 부드럽게 늦춰진 채 따라다니고, 포인터가 다른 항목으로 옮기면 다음 이미지로 미끄러지듯 바뀌게 해 줘.
미리보기가 목록 클릭을 절대 막지 않게 하고, 터치와 키보드에서는 미리보기 없이도 목록을 온전히 쓸 수 있게 해 줘.Image & Media의 다른 모션
A
B
끌어 보세요
Before-After Slider (비포 애프터 슬라이더)
다른 이름 Image comparison slider, Compare slider
드래그할 수 있는 구분선을 사이에 두고 한쪽에는 한 이미지, 다른 쪽에는 다른 이미지가 보입니다.
쓰는 곳
사진 보정, 제품 비교
[적용할 곳]에 비포 애프터 슬라이더(Before-After Slider)를 넣어 줘. 이미지 비교 슬라이더(image comparison slider), 컴페어 슬라이더(compare slider)라고도 불러.
두 이미지를 겹쳐 두고, 세로 구분선을 드래그하면 한쪽은 더 많이, 다른 쪽은 덜 보이게 해 줘. 구분선은 지연 없이 포인터를 바로 따라오게.
구분선은 가운데에서 시작하고, 터치와 방향키로도 움직일 수 있게 해 줘.안에서 스크롤해 보세요
Image Reveal Wipe (이미지 리빌 와이프)
다른 이름 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
덮개가 줄어들거나 마스크 가장자리가 넓어지면서 이미지가 드러납니다.
쓰는 곳
스크롤로 드러나는 에디토리얼 이미지
[적용할 곳]에 이미지 리빌 와이프(Image Reveal Wipe)를 넣어 줘. 마스크 리빌(mask reveal), 클립 패스 리빌(clip-path reveal)이라고도 불러.
이미지가 스크롤로 화면에 들어오면 덮개가 한쪽에서 걷히며 스크롤에 맞춰 부드럽게 이미지를 드러내게 해 줘. 화면을 벗어나기 한참 전에 완전히 보이도록.
레이아웃이 튀지 않게 이미지 자리를 미리 잡아 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 이미지를 처음부터 다 보여 줘.