Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Scrollen

Parallax plate gallery

Parallax plate gallery: Eine einrastende vertikale Galerie, in der die übergroße Indexnummer jeder Platte mit einer anderen Geschwindigkeit als die Platte selbst wandert, mit einer Scroll-Fortschrittsschiene am unteren Rand.

Parallax plate gallery verwenden

Parallax plate gallery verwendet das Vorschauformat „breit“ 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.

EinstellungTypStandardwertVorschaugrenzen
accentcolor#F5C542Keine weitere Grenze in den Metadaten.
panelsnumber5Von 3 bis 8; Schrittweite 1
depthnumber240Von 40 bis 500; Schrittweite 20
snapbooleantrueKeine weitere Grenze in den Metadaten.
showProgressbooleantrueKeine weitere Grenze in den Metadaten.
Für welche Frameworks ist Parallax plate gallery verfügbar?

Parallax plate gallery 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 plate gallery?

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

Welche Details zur Barrierefreiheit sind in Parallax plate gallery erkennbar?

Der React-Quellcode von Parallax plate gallery enthält: Attribute und Ereignisbehandler (aria-hidden, aria-label, tabIndex); explizite Rollen (list, listitem). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Parallax plate gallery reduzierte Bewegung?

Parallax plate gallery liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: behavior: reduceMotion ? "auto" : "smooth". 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 Sticky zoom hero von Fieldbook aus der Kategorie Scrollen.
1892Sticky zoom heroScrollenEin Hero-Panel, das angeheftet bleibt, während Sie scrollen, und dessen Hintergrund in Ihre Richtung schiebt, bis er verschwimmt und die Seite an den darunter liegenden Text übergibt.
Standbild der UI-Komponente Blur fade reveal von Fieldbook aus der Kategorie Scrollen.
1843Blur fade revealScrollenInhalte, die unscharf und transparent ankommen, werden dann beim ersten Scrollen in die Ansicht geschärft, ohne dass sich ein einziges Pixel verschiebt.
Standbild der UI-Komponente Curtain scroll reveal von Fieldbook aus der Kategorie Scrollen.
2832Curtain scroll revealScrollenEine Reihe von Bildern, die beim Scrollen jeweils hinter einer verschiebbaren Vorhangmaske zum Vorschein kommen, bringt sie ins Blickfeld und verdeckt sie wieder, wenn sie wieder herausscrollen.
Standbild der UI-Komponente Scroll snap word list von Fieldbook aus der Kategorie Scrollen.
2840Scroll snap word listScrollenEine lange Liste von Wörtern rollt in einem festen Fenster und das Wort, das das Mittelband kreuzt, leuchtet mit einem springenden Knall auf, während der Rest dunkel und geneigt bleibt.
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.
Standbild der UI-Komponente Masonry flow von Fieldbook aus der Kategorie Layout.
1532Masonry flowLayoutEine Mauerwerkswand, die Kacheln unterschiedlicher Höhe in Säulen packt, jede einzelne anhebt, während sie ins Blickfeld gescrollt wird, und das gesamte Raster neu positioniert, wenn sich die Anzahl der Säulen ändert.