Ken Burns Effect (켄 번스 효과)

포인터를 올리면 이미지가 틀 안에서 커지고, 때로는 포인터를 따라 이동합니다.

[적용할 곳]에 호버 줌(Hover Zoom) 효과를 넣어 줘. 이미지 줌 온 호버(image zoom on hover), 줌 팬(zoom-pan)이라고도 불러.
포인터가 이미지 위에 있는 동안 틀 크기는 그대로 두고 이미지가 틀 안에서 느리고 부드럽게 커지고, 벗어나면 부드럽게 돌아오게 해 줘.
이미지는 틀에 맞춰 잘라 레이아웃 밖으로 넘치지 않게 하고, 키보드 포커스에도 같은 줌을 보여 줘.

스크롤에 따라 요소나 장면이 커지거나 작아집니다.

[적용할 곳]에 스크롤 줌(Zoom on Scroll) 효과를 넣어 줘. scroll zoom, 스케일 온 스크롤(scale on scroll)이라고도 불러.
섹션이 화면에 머무는 동안 요소가 작은 카드에서 스크롤에 맞춰 부드럽게 커져 화면 전체를 채우고, 위로 올리면 다시 작아지게 해 줘.
주변 레이아웃을 밀어내지 않게 크기를 바꾸고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 줌 없이 최종 크기로 보여 줘.

스크롤에 따라 레이어가 서로 다른 속도로 움직여 깊이감을 줍니다.

[적용할 곳]에 패럴랙스(Parallax) 스크롤 효과를 넣어 줘. 패럴랙스 스크롤링(parallax scrolling), 패럴랙스 레이어(parallax layers)라고도 불러.
페이지를 스크롤할 때 배경 레이어가 콘텐츠보다 느리게 움직이고, 멀리 있는 레이어일수록 덜 움직여서 은은한 깊이감을 주게 해 줘.
지연 없이 스크롤 위치에 맞춰 움직이고, 텍스트는 보통 속도 레이어에 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 효과를 꺼 줘.

썸네일이 제자리에서 커지며 어두워진 배경 위 가운데에 크게 펼쳐집니다.

[적용할 곳]에 라이트박스 줌(Lightbox Zoom)을 넣어 줘. 이미지 줌 오버레이(image zoom overlay), 미디엄 스타일 줌(Medium-style zoom)이라고도 불러.
썸네일을 클릭하면 제자리에서 부드럽게 커져 가운데 큰 화면이 되고 뒤쪽 페이지는 어둡게 물러나게 해 줘. 닫으면 같은 자리로 다시 줄어들게.
Esc 키나 배경 클릭으로 닫히게 하고, 열려 있는 동안 포커스를 큰 화면 안으로 옮기고, 닫은 뒤에는 썸네일로 돌려 줘.

둥근 렌즈가 포인터를 따라다니며 이미지 일부를 확대해 보여 줍니다.

[적용할 곳]에 돋보기(Magnifier Lens)를 넣어 줘. 렌즈(lens), 루페(loupe)라고도 불러.
둥근 렌즈가 지연 없이 포인터 바로 아래에 놓이고, 그 아래 이미지 부분을 확대해 보여 주게 해 줘.
확대된 화면은 포인터 아래 정확한 지점과 어긋나지 않게 맞추고, 터치 기기에서는 손가락으로 이미지를 누르고 있는 동안 렌즈를 보여 줘.

드래그할 수 있는 구분선을 사이에 두고 한쪽에는 한 이미지, 다른 쪽에는 다른 이미지가 보입니다.

[적용할 곳]에 비포 애프터 슬라이더(Before-After Slider)를 넣어 줘. 이미지 비교 슬라이더(image comparison slider), 컴페어 슬라이더(compare slider)라고도 불러.
두 이미지를 겹쳐 두고, 세로 구분선을 드래그하면 한쪽은 더 많이, 다른 쪽은 덜 보이게 해 줘. 구분선은 지연 없이 포인터를 바로 따라오게.
구분선은 가운데에서 시작하고, 터치와 방향키로도 움직일 수 있게 해 줘.