Medien

Parallax photo columns

Parallax photo columns: Eine randlose Wand aus schwebenden Fotospalten in 3D-Perspektive, wobei die Kacheln unter dem Cursor- oder Tastaturfokus heller werden und sich anheben, während ihre Spalte anhält.

Parallax photo columns verwenden

Parallax photo columns verwendet das Vorschauformat „ganze Seite“ mit der Theme-Einstellung „dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`columns`	`number`	`4`	Von 2 bis 6; Schrittweite 1
`driftSpeed`	`number`	`40`	Von 10 bis 100; Schrittweite 5
`tilt`	`number`	`16`	Von 0 bis 30; Schrittweite 1
`overlayColor`	`color`	`#060010`	Keine weitere Grenze in den Metadaten.
`pauseOnHover`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Parallax photo columns verfügbar?

Parallax photo columns ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Parallax photo columns?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion, clsx.

Welche Details zur Barrierefreiheit sind in Parallax photo columns erkennbar?

Der React-Quellcode von Parallax photo columns enthält: native Elemente (a); Attribute und Ereignisbehandler (aria-hidden, aria-label, tabIndex). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Parallax photo columns reduzierte Bewegung?

Parallax photo columns liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Orbiting image spiral von Fieldbook aus der Kategorie Medien.

2744Orbiting image spiralMedienEin Stapel quadratischer Fotos, die um eine unsichtbare Spirale herum angeordnet sind, die sich kontinuierlich dreht, wobei jedes Foto je nach seinem Abstand zur Vorderseite skaliert, schärfer oder unschärfer wird.

Standbild der UI-Komponente Browser window frame von Fieldbook aus der Kategorie Medien.

2308Browser window frameMedienEin Desktop-Browserfenster-Mockup mit Ampelpunkten und einer Adressleiste, die einen Screenshot oder ein Endlosvideo als Seiteninhalt einrahmt.

Standbild der UI-Komponente Experience Shelf von Fieldbook aus der Kategorie Medien.

2352Experience ShelfMedienEin horizontal scrollendes Regal mit Fotokarten, jede mit einer Schaltfläche zum Speichern, einem Abzeichen, einer Bewertung und einem Preis, das sich mit den Pfeiltasten oder einem Wischen reibungslos scrollen lässt.

Standbild der UI-Komponente iPhone Device Frame von Fieldbook aus der Kategorie Medien.

2372iPhone Device FrameMedienEine Vektor-Telefonblende mit einem Kameraausschnitt, der ein Foto, ein sich wiederholendes Video oder einen leeren Platzhalter in seinem eigenen abgerundeten Bildschirm umrahmt.

Standbild der UI-Komponente Sequential terminal log von Fieldbook aus der Kategorie Medien.

2423Sequential terminal logMedienEin Terminalfenster, das eine Skriptsitzung wiedergibt, sobald sie in die Ansicht gescrollt wird, Befehle eingibt und Statuszeilen nacheinander einblendet.

Standbild der UI-Komponente Drifting particle field von Fieldbook aus der Kategorie Hintergründe.

1952Drifting particle fieldHintergründeEine langsam taumelnde Wolke aus kleinen runden Punkten, von denen jeder auf seinem eigenen Weg treibt, wobei sich die gesamte Wolke vom Zeiger weg neigt.