04Zoom control bar with snapped steps
Minus, plus, and fit buttons move the scale through only four stops: 100, 150, 200, and 300 percent. The number swaps in one frame with steps(1, end), and the same value is announced once through aria-live.
Best forDocument viewers and e-books limited to fixed zoom stops
steps(1, end)scalearia-live
<main class="stage">
<div class="zl is-demo" id="zl">
<div class="zl__view"><div class="zl__layer" id="zl-layer"></div></div>
<div class="zl__bar">
<button class="zl__btn" id="zl-out" type="button" aria-label="Zoom out one step"><svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="M216 56v144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16" opacity=".2"/><path d="M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8"/></g></svg></button>
<span class="zl__pct" id="zl-pct" role="status" aria-live="polite">
<span class="zl__n zl__n--1">100%</span><span class="zl__n zl__n--2">150%</span><span class="zl__n zl__n--3">200%</span><span class="zl__n zl__n--4">300%</span>
</span>
<button class="zl__btn" id="zl-in" type="button" aria-label="Zoom in one step"><svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="M216 56v144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16" opacity=".2"/><path d="M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8"/></g></svg></button>
<button class="zl__btn zl__btn--fit" id="zl-fit" type="button" aria-label="Fit to screen"><svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="M208 48v160H48V48Z" opacity=".2"/><path d="M216 48v48a8 8 0 0 1-16 0V67.31l-42.34 42.35a8 8 0 0 1-11.32-11.32L188.69 56H160a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8M98.34 146.34L56 188.69V160a8 8 0 0 0-16 0v48a8 8 0 0 0 8 8h48a8 8 0 0 0 0-16H67.31l42.35-42.34a8 8 0 0 0-11.32-11.32M208 152a8 8 0 0 0-8 8v28.69l-42.34-42.35a8 8 0 0 0-11.32 11.32L188.69 200H160a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8M67.31 56H96a8 8 0 0 0 0-16H48a8 8 0 0 0-8 8v48a8 8 0 0 0 16 0V67.31l42.34 42.35a8 8 0 0 0 11.32-11.32Z"/></g></svg></button>
</div>
</div>
</main>@use "../../../../site/static/demo-tokens" as *;
$duration: $dur-quick;
$easing: $ease-spring;
$color: $subject-ink;
@include stage($stage-orange);
// 가짜 사진 — 파일 없이 그린 문서 한 장. 배율이 바뀌면 글줄 굵기가 그대로 커진다
$doc:
radial-gradient(circle at 82% 16%, $subject-pink 0 6%, transparent 7%),
repeating-linear-gradient(0deg, rgba(23, 20, 26, .68) 0 2.4%, transparent 2.4% 9%),
linear-gradient($subject-cream, $subject-cream);
.zl {
display: flex;
flex-direction: column;
gap: $sp-2;
width: 288px;
}
.zl__view {
box-sizing: border-box;
width: 100%;
height: 124px;
overflow: hidden;
border-radius: $r-card;
background: $subject-cream;
box-shadow: $shadow-raised;
}
.zl__layer {
width: 100%;
height: 100%;
background: $doc;
transform-origin: center center;
transform: scale(1);
}
.zl__bar {
display: flex;
align-items: center;
justify-content: center;
gap: $sp-2;
height: 36px;
padding: 0 $sp-2;
border-radius: $r-pill;
background: rgba(23, 20, 26, .88);
color: $subject-cream;
}
.zl__btn {
display: inline-flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 247, 230, .14);
color: inherit;
cursor: pointer;
}
.zl__btn:disabled { opacity: .38; cursor: default; }
.zl__btn:focus-visible { outline: 2px solid $subject-cream; outline-offset: 2px; }
.zl__btn--fit { background: rgba(255, 210, 63, .32); }
.zl__pct {
position: relative;
width: 56px;
height: 20px;
text-align: center;
font-size: 13px;
line-height: 20px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.zl__n {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
}
.zl__n--1 { opacity: 1; } // 루프 밖 기본 표시
// ── 자동 루프 (2s) ────────────────────────────────────
// 100 → 150 → 200 → 300 → 200 → 150 → 100. 올라간 길로 되돌아오므로 끝에서 튀지 않는다.
// 단계가 끊어지는 컨트롤이라 배율도 숫자도 steps(1, end) 로 한 프레임에 갈아 끼운다
.zl.is-demo .zl__layer,
.zl.is-demo .zl__n {
animation-duration: $dur-loop;
animation-timing-function: steps(1, end);
animation-iteration-count: infinite;
}
.zl.is-demo .zl__layer { animation-name: zl-zoom; }
.zl.is-demo .zl__n--1 { animation-name: zl-n1; }
.zl.is-demo .zl__n--2 { animation-name: zl-n2; }
.zl.is-demo .zl__n--3 { animation-name: zl-n3; }
.zl.is-demo .zl__n--4 { animation-name: zl-n4; }
@keyframes zl-zoom {
0% { transform: scale(1); }
14% { transform: scale(1.5); }
28% { transform: scale(2); }
44% { transform: scale(3); }
58% { transform: scale(2); }
72% { transform: scale(1.5); }
86% { transform: scale(1); }
100% { transform: scale(1); }
}
@keyframes zl-n1 {
0% { opacity: 1; }
14% { opacity: 0; }
86% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes zl-n2 {
0% { opacity: 0; }
14% { opacity: 1; }
28% { opacity: 0; }
72% { opacity: 1; }
86% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes zl-n3 {
0% { opacity: 0; }
28% { opacity: 1; }
44% { opacity: 0; }
58% { opacity: 1; }
72% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes zl-n4 {
0% { opacity: 0; }
44% { opacity: 1; }
58% { opacity: 0; }
100% { opacity: 0; }
}
@media (max-width: 360px) {
.zl__view { height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
.zl.is-demo .zl__layer,
.zl.is-demo .zl__n { animation: none !important; }
.zl.is-demo .zl__layer { transform: scale(2); }
.zl.is-demo .zl__n--1 { opacity: 0; }
.zl.is-demo .zl__n--3 { opacity: 1; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ff4d1f;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.zl {
display: flex;
flex-direction: column;
gap: 8px;
width: 288px;
}
.zl__view {
box-sizing: border-box;
width: 100%;
height: 124px;
overflow: hidden;
border-radius: 16px;
background: #fff7e6;
box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}
.zl__layer {
width: 100%;
height: 100%;
background: radial-gradient(circle at 82% 16%, #ff9ebb 0 6%, transparent 7%), repeating-linear-gradient(0deg, rgba(23, 20, 26, 0.68) 0 2.4%, transparent 2.4% 9%), linear-gradient(#fff7e6, #fff7e6);
transform-origin: center center;
transform: scale(1);
}
.zl__bar {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 36px;
padding: 0 8px;
border-radius: 999px;
background: rgba(23, 20, 26, 0.88);
color: #fff7e6;
}
.zl__btn {
display: inline-flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 247, 230, 0.14);
color: inherit;
cursor: pointer;
}
.zl__btn:disabled {
opacity: 0.38;
cursor: default;
}
.zl__btn:focus-visible {
outline: 2px solid #fff7e6;
outline-offset: 2px;
}
.zl__btn--fit {
background: rgba(255, 210, 63, 0.32);
}
.zl__pct {
position: relative;
width: 56px;
height: 20px;
text-align: center;
font-size: 13px;
line-height: 20px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.zl__n {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
}
.zl__n--1 {
opacity: 1;
}
.zl.is-demo .zl__layer,
.zl.is-demo .zl__n {
animation-duration: 2s;
animation-timing-function: steps(1, end);
animation-iteration-count: infinite;
}
.zl.is-demo .zl__layer {
animation-name: zl-zoom;
}
.zl.is-demo .zl__n--1 {
animation-name: zl-n1;
}
.zl.is-demo .zl__n--2 {
animation-name: zl-n2;
}
.zl.is-demo .zl__n--3 {
animation-name: zl-n3;
}
.zl.is-demo .zl__n--4 {
animation-name: zl-n4;
}
@keyframes zl-zoom {
0% {
transform: scale(1);
}
14% {
transform: scale(1.5);
}
28% {
transform: scale(2);
}
44% {
transform: scale(3);
}
58% {
transform: scale(2);
}
72% {
transform: scale(1.5);
}
86% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
@keyframes zl-n1 {
0% {
opacity: 1;
}
14% {
opacity: 0;
}
86% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes zl-n2 {
0% {
opacity: 0;
}
14% {
opacity: 1;
}
28% {
opacity: 0;
}
72% {
opacity: 1;
}
86% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes zl-n3 {
0% {
opacity: 0;
}
28% {
opacity: 1;
}
44% {
opacity: 0;
}
58% {
opacity: 1;
}
72% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes zl-n4 {
0% {
opacity: 0;
}
44% {
opacity: 1;
}
58% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@media (max-width: 360px) {
.zl__view {
height: 116px;
}
}
@media (prefers-reduced-motion: reduce) {
.zl.is-demo .zl__layer,
.zl.is-demo .zl__n {
animation: none !important;
}
.zl.is-demo .zl__layer {
transform: scale(2);
}
.zl.is-demo .zl__n--1 {
opacity: 0;
}
.zl.is-demo .zl__n--3 {
opacity: 1;
}
}// 실제 동작: 배율은 네 단계뿐이다. 사이 값으로는 절대 서지 않는다.
var ZL_STOPS = [1, 1.5, 2, 3];
var zl = document.getElementById('zl');
var zlLayer = document.getElementById('zl-layer');
var zlPct = document.getElementById('zl-pct');
var zlStep = 0;
function zlPaint() {
zl.classList.remove('is-demo'); // 사람이 누르면 자동 루프를 멈춘다
zlLayer.style.transform = 'scale(' + ZL_STOPS[zlStep] + ')';
zlPct.textContent = Math.round(ZL_STOPS[zlStep] * 100) + '%';
document.getElementById('zl-out').disabled = zlStep === 0;
document.getElementById('zl-in').disabled = zlStep === ZL_STOPS.length - 1;
}
document.getElementById('zl-out').addEventListener('click', function () { zlStep = Math.max(zlStep - 1, 0); zlPaint(); });
document.getElementById('zl-in').addEventListener('click', function () { zlStep = Math.min(zlStep + 1, ZL_STOPS.length - 1); zlPaint(); });
document.getElementById('zl-fit').addEventListener('click', function () { zlStep = 0; zlPaint(); });import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./ZoomLevelControl.module.scss";
export type ZoomLevelControlProps = {
/** 배율 단계. 사이 값으로는 서지 않는다 */
stops?: number[];
outLabel?: string;
inLabel?: string;
fitLabel?: string;
/** 자동 재생 루프 (갤러리용). 사람이 누르면 꺼진다 */
demo?: boolean;
duration?: number;
easing?: string;
color?: string;
};
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
const Minus = () => (
<svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true">
<g fill="currentColor">
<path d="M216 56v144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16" opacity=".2" />
<path d="M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8" />
</g>
</svg>
);
const Plus = () => (
<svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true">
<g fill="currentColor">
<path d="M216 56v144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16" opacity=".2" />
<path d="M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8" />
</g>
</svg>
);
const Fit = () => (
<svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true">
<g fill="currentColor">
<path d="M208 48v160H48V48Z" opacity=".2" />
<path d="M216 48v48a8 8 0 0 1-16 0V67.31l-42.34 42.35a8 8 0 0 1-11.32-11.32L188.69 56H160a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8M98.34 146.34L56 188.69V160a8 8 0 0 0-16 0v48a8 8 0 0 0 8 8h48a8 8 0 0 0 0-16H67.31l42.35-42.34a8 8 0 0 0-11.32-11.32M208 152a8 8 0 0 0-8 8v28.69l-42.34-42.35a8 8 0 0 0-11.32 11.32L188.69 200H160a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8M67.31 56H96a8 8 0 0 0 0-16H48a8 8 0 0 0-8 8v48a8 8 0 0 0 16 0V67.31l42.34 42.35a8 8 0 0 0 11.32-11.32Z" />
</g>
</svg>
);
export default function ZoomLevelControl({
stops = [1, 1.5, 2, 3],
outLabel = "Zoom out one step",
inLabel = "Zoom in one step",
fitLabel = "Fit to screen",
demo = true,
duration = 220,
easing = "cubic-bezier(.2,.8,.2,1)",
color = "#17141a",
}: ZoomLevelControlProps) {
const [live, setLive] = useState(demo);
const [step, setStep] = useState(0);
function go(next: number) {
setLive(false);
setStep(Math.min(Math.max(next, 0), stops.length - 1));
}
const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
const layer: CSSProperties = { transform: `scale(${stops[step]})` };
return (
<div className={[styles.root, live ? styles.isDemo : ""].join(" ")} style={vars}>
<div className={styles.view}>
<div className={styles.layer} style={live ? undefined : layer} />
</div>
<div className={styles.bar}>
<button className={styles.btn} type="button" aria-label={outLabel} disabled={!live && step === 0} onClick={() => go(step - 1)}>
<Minus />
</button>
<span className={styles.pct} role="status" aria-live="polite">
{live ? (
<>
<span className={[styles.n, styles.n1].join(" ")}>100%</span>
<span className={[styles.n, styles.n2].join(" ")}>150%</span>
<span className={[styles.n, styles.n3].join(" ")}>200%</span>
<span className={[styles.n, styles.n4].join(" ")}>300%</span>
</>
) : (
`${Math.round(stops[step] * 100)}%`
)}
</span>
<button className={styles.btn} type="button" aria-label={inLabel} disabled={!live && step === stops.length - 1} onClick={() => go(step + 1)}>
<Plus />
</button>
<button className={[styles.btn, styles.btnFit].join(" ")} type="button" aria-label={fitLabel} onClick={() => go(0)}>
<Fit />
</button>
</div>
</div>
);
}04 Zoom control bar with snapped steps — Measured area 21.867% · moving frames 6/23Original by GODRICH · SCSS and React ship in the zip · 9 Image Zoom Viewer Interactions — No Photo Files
The post this demo lives in
9 Image Zoom Viewer Interactions — No Photo FilesAn image zoom viewer is the layer between a picture and the person studying it: it magnifies, turns, or lights up one pa See all demos in this post
