화면의 시작 위치와 도착 위치를 정해, 확대와 이동을 한 번에 부드럽게 이어 줍니다.
<div class="stage"><div class="board"><div class="tile a"><b>01</b><span>START</span><i></i><i></i></div><div class="tile b"><b>02</b><span>DETAIL</span><i></i><i></i></div><div class="tile c"><b>03</b><span>CONTEXT</span><i></i></div><div class="path"></div></div>
<div class="view"><span>A</span><span>B</span></div>
</div>.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.board{position:absolute;inset:-5%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:7%;padding:8%;transform-origin:50% 50%;animation:tour 4.8s ease-in-out infinite alternate}
.tile{position:relative;border:1px solid var(--line);background:var(--surface);padding:7%;box-shadow:0 5px 18px #0001}
.tile b{font:700 clamp(18px,4vw,36px) ui-monospace,monospace;color:var(--accent)}
.tile span{display:block;margin-top:5px;font:9px ui-monospace,monospace;letter-spacing:.12em;color:var(--muted)}
.tile i{display:block;width:75%;height:2px;margin-top:9%;background:var(--line)}.tile i:last-child{width:53%}
.a{transform:rotate(-3deg)}.b{transform:rotate(2deg)}.c{transform:rotate(-1deg)}
.path{position:absolute;left:29%;top:28%;width:40%;height:38%;border:2px dashed var(--accent);border-left:0;border-bottom:0;border-radius:0 60% 0 0;opacity:.7}
.view{position:absolute;right:12px;bottom:12px;display:flex;gap:14px;padding:5px 8px;background:var(--surface);border:1px solid var(--line);font:10px ui-monospace,monospace}
.view span{color:var(--muted)}.view span:first-child{color:var(--accent)}
@keyframes tour{0%,12%{transform:scale(1) translate(0,0)}45%{transform:scale(1.28) translate(-5%,5%)}100%{transform:scale(1.42) translate(9%,-7%)}}팬 앤 줌은 넓은 화면 안에서 보여 줄 영역을 차례로 훑는 방법입니다. 한쪽을 읽은 뒤 다음 지점으로 이동하면, 전체 맥락과 세부를 같이 전달할 수 있습니다.
편집에서는 시작·끝 프레임에 위치와 배율을 기록하고 이동 경로를 보간합니다. 데모는 큰 보드 안의 두 정류장을 지나며 구도를 이동하고 확대합니다.
켄 번스 효과도 정지 이미지에 팬과 줌을 쓰지만, 팬 앤 줌은 보통 화면 안의 여러 정보 지점을 안내하는 흐름을 강조합니다. 경로가 잦게 꺾이면 읽는 사람이 따라가기 어렵습니다.
지도, 큰 캡처, 도표처럼 한 화면에 들어오지 않는 자료를 순서대로 설명할 때 씁니다.