Film Atlas
한국어
⌕ Screen zoom

Pan and zoom

팬 앤 줌

Chosen start and end points guide one smooth move across a larger screen.

···
html
<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>
css
.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%)}}
···

Ken Burns effect켄 번스 효과

A slow pan or zoom gives a still image the feeling of a moving camera.

···

Zoom to element요소 확대(줌 투 엘리먼트)

Reframes around one button or field to make the intended point of attention clear.

···

Cursor-follow zoom커서 따라가기 줌

The frame enlarges around the moving pointer to follow an on-screen action.

···

Scale keyframe스케일 키프레임

Set start and end size values on a timeline, then interpolate the scale between them.

Pan and zoom guides the viewer across a larger screen, revealing one area and then another. Moving from one stop to the next can preserve the overall context while making details readable.

In an editor, record position and scale at the start and end frames, then interpolate the path. The demo travels between two stops on a larger board.

The Ken Burns effect also pans and zooms across a still, while pan and zoom often emphasizes a guided route through several areas. Too many sharp direction changes make that route hard to follow.

When to use

Use it to explain a map, large capture, or diagram that cannot fit at a readable size all at once.

Open as page ↗

Suggest an entry

Tell us about a film term or effect that’s missing. We review each suggestion.