MotionZoom

Ein Bild, das von seinem Platz auf Vollbild zoomt; zum Schließen wegziehen.

WebReact NativeOverlays

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

App.jsx

import { MotionZoom, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

// Small generated landscapes, so the example needs no image files.
function landscape(sky, hill, sun) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
    <rect width="300" height="200" fill="${sky}"/>
    <circle cx="220" cy="62" r="26" fill="${sun}"/>
    <path d="M0 150 Q80 90 160 140 T300 120 V200 H0Z" fill="${hill}"/>
    <path d="M0 175 Q110 130 200 170 T300 160 V200 H0Z" fill="#0e2e24"/>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}

const photos = [
  landscape('#eaf6f0', '#43c58f', '#ffffff'),
  landscape('#cfe8dc', '#176b52', '#f4faf7'),
  landscape('#176b52', '#2e8f6d', '#eaf6f0'),
  landscape('#f4faf7', '#2e8f6d', '#43c58f'),
  landscape('#0e2e24', '#176b52', '#43c58f'),
  landscape('#43c58f', '#176b52', '#ffffff'),
];

export default function App({ margin = 24, radius = 14, spring = 'default' }) {
  return (
    <div className="stage">
      <div className="grid">
        {photos.map((photo) => (
          <MotionZoom
            key={photo}
            src={photo}
            width={300}
            height={200}
            margin={margin}
            transition={motionTokens.spring[spring]}
            style={{ borderRadius: radius }}
            className="photo"
          />
        ))}
      </div>
      <p className="hint">Click a photo. Drag it away, click or press Escape to close.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  cursor: zoom-in;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

Kürzeste Nutzung

Photo.jsx

<MotionZoom
  src={photo.thumb}
  zoomSrc={photo.full}
  width={240}
  height={160}
  style={{ objectFit: 'cover', borderRadius: 12 }}
/>;

Was sie dir abnimmt

Ein Klick, Enter oder Leertaste zoomt das Bild von seiner Position aus, bis es den Bildschirm innerhalb von margin füllt.
Die vergrößerte Kopie startet genau so, wie das Vorschaubild aussieht – mit object-fit-Ausschnitt und Eckenradius.
zoomSrc blendet ein, sobald es geladen ist.
Ein Klick, Escape oder Wegziehen schließt es; ein schneller Wurf auch, und kurzes Ziehen federt zurück.

Gut für

Ein Fotoraster.
Eine Produktgalerie.
Bilder in einem Blogartikel.

props

Prop	Typ	Standard	Beschreibung
`src`	`string`		Das an Ort und Stelle gezeigte Bild.
`zoomSrc`	`string`		Ein größeres Bild, das nach dem Laden angezeigt wird; behalte dasselbe Seitenverhältnis.
`margin`	`number`	`24`	Freiraum um das vergrößerte Bild in Pixeln.
`disabled`	`boolean`	`false`	Schaltet den Zoom aus.
`onZoomChange`	`(zoomed) => void`		Läuft mit `true` beim Vergrößern und `false` beim Schließen.
`backdropStyle`	`CSSProperties`		Inline-Style für den Hintergrund.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

Das Overlay existiert nur während des Zooms (im Web ein Dialog im Top Layer), daher kann das Bild überall sitzen, sogar in einem Absatz. Weitere props gehen an das img.

Unter React Native übergibst du source und zoomSource; das Overlay ist ein transparentes Modal.

Verwendet in diesen Beispielen

Foto-FeedDurch Fotos wischen, mit Vorschaubildern springen, jedes Foto im Vollbild öffnen und seine Details hochziehen.MotionPagerMotionHighlightMotionZoomMotionSheet