Texteffekte

Scroll float reveal

Überschriftszeichen schweben von unten nach oben und nehmen ihre Form an, während ihr Abschnitt durch das Ansichtsfenster scrollt und direkt an die Scrollposition verschoben wird.

Scroll scrubbed heading

Changelog · vol. 14

Every glyph in this heading tracks the scrollbar instead of a clock. Push the list down and the letters climb out of their baseline one after another, stretching back into proportion as they go. Pull it back up and they sink and stretch again.

v2.7.0 · Scrub timeline snaps to whole frames, so recorded captures stop strobing between two states.

v2.6.3 · Character stagger now measures from the first glyph that leaves the band, not from page load.

v2.6.0 · Reduced motion renders the settled heading outright, no ramp, no waiting.

The effect reads best on headings of eight to thirty characters. Longer lines stagger so far that the tail is still rising while the head has already settled, which can be a look, but usually is not.

Fig. 14 · settle band spans the middle half of the viewport

Scroll float reveal verwenden

Überschriftszeichen schweben von unten nach oben und nehmen ihre Form an, während ihr Abschnitt durch das Ansichtsfenster scrollt und direkt an die Scrollposition verschoben wird.

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: text, stagger, duration

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Code, Framework-Versionen und Installationsbefehle sind im Arbeitsbereich oben verfügbar.

Verbinde deinen Agenten

Ähnliche Komponenten

2815Media masked headingTexteffekteEine fett gedruckte Überschrift fungiert als ausgeschnittenes Fenster für die dahinter schwebenden Medien, die sich für ein Parallaxengefühl gegenüber dem Zeiger neigen und ihre Enthüllung beim Schweben wiedergeben können.

2242Staggered Reveal TextTexteffekteEin Satz erscheint in gestaffelten Teilen, aufgeteilt in Wörter, Zeichen oder Zeilen, wobei ein ausgewählter Eingangsstil wie Einblenden, Unschärfe, Gleiten oder Skalieren verwendet wird.

2301Ascii Art HeadingTexteffekteEin großes Wort wird als Mosaik aus monospaced-Zeichen dargestellt, deren Dichte die Buchstabenformen nachahmt und sich sanft kräuselt und zum Zeiger hin neigt.

2307Blur in word revealTexteffekteWörter in einem Satz lösen sich nacheinander von einer sanften Unschärfe in einen scharfen Fokus auf, während der Satz ins Blickfeld gescrollt wird.

2824Cascading Letter RevealTexteffekteEine Überschrift, die sich Buchstabe für Buchstabe offenbart, mit einem sanften Auf- und Abschwellen, wenn sie sichtbar wird, und dann unverändert bleibt, wenn sie fertig ist.

2410Reading highlight copyTexteffekteEin Absatz, der beim Scrollen Wort für Wort aufleuchtet, sodass gelesene Wörter hell und ungelesene Wörter abgeblendet bleiben, sodass die Scroll-Position gleichzeitig als Leseposition dient.

Float Into View

Scroll float reveal verwenden

Ähnliche Komponenten

Float Into View