Scrollen

Curtain scroll reveal

Curtain scroll reveal: Eine 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.

Saltlight review

Five plates from the north coast study

Scroll to draw each curtain back. Scroll up and the curtains close again.

Harbor dawn01 / 03

Ridge line02 / 03

Tide study03 / 03

Each plate follows its own range, so the row never moves in lockstep. Plates re-cover once they rise back out of range.

Curtain scroll reveal verwenden

Curtain scroll reveal 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.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`revealDirection`	`select`	`bottom`	Optionen: bottom, top, left, right
`imageCount`	`number`	`3`	Von 2 bis 5; Schrittweite 1
`settleScale`	`number`	`1.1`	Von 1 bis 1.3; Schrittweite 0.05

Für welche Frameworks ist Curtain scroll reveal verfügbar?

Curtain scroll reveal 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 Curtain scroll reveal?

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

Welche Details zur Barrierefreiheit sind in Curtain scroll reveal erkennbar?

Der React-Quellcode von Curtain scroll reveal enthält: Attribute und Ereignisbehandler (aria-hidden). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Curtain scroll reveal reduzierte Bewegung?

Curtain scroll reveal liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: coverStyle: reduce ? { display: "none" } : horizontal ? { x: shift } : { y: shift }; reduce ? undefined : { opacity: captionOpacity, y: captionY }; reduce ? undefined : { scale }. 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 Parallax plate gallery von Fieldbook aus der Kategorie Scrollen.

1873Parallax plate galleryScrollenEine 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.

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 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 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 Bouncing Photo Fan von Fieldbook aus der Kategorie Karten.

1844Bouncing Photo FanKartenEine Reihe überlappender quadratischer Fotokacheln, die mit einer elastischen Überschwingung auftauchen und sich dann gegenseitig zur Seite schieben, wenn man darüber schwebt.

Standbild der UI-Komponente Curtain line loader von Fieldbook aus der Kategorie Statusmeldungen.

2138Curtain line loaderStatusmeldungenEin Ladevorhang, der sich hinter einer hellen Wanderlinie zurückzieht und den fertigen Inhalt sichtbar macht, anstatt ihn einzublenden.