jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS progress()-Funktionsrechner

Berechnen Sie CSS progress()-Funktionswerte für scroll-gesteuerte Animationen und Wertzuordnungen.

Tool wird geladen...

Was ist CSS progress()-Funktionsrechner?

Die CSS progress()-Funktion (Chrome 138+) ist eine mathematische Mapping-Funktion, die einen Eingabewert aus einem Zahlenbereich in einen 0-1-Fortschrittswert umwandelt. Zum Beispiel gibt progress(scroll-position from 0 to 500) den Wert 0 zurück, wenn die Scrollposition 0 ist, 1 bei 500 und 0.5 bei 250. Dieser Fortschrittswert kann jede numerische CSS-Eigenschaft steuern und ersetzt komplexe calc()-Ketten für scroll-gebundene Effekte, viewport-relatives Sizing und Interpolation benutzerdefinierter Eigenschaften.

Kurze Antwort

Verwenden Sie CSS progress(input from min to max), um einen beliebigen numerischen Wert in einen 0-1-Fortschrittsbereich abzubilden. Steuern Sie Opazität, Skalierung, Transformation, color-mix-Prozentsätze oder jede andere zahlenakzeptierende CSS-Eigenschaft basierend auf der Scrollposition, Viewport-Dimensionen oder benutzerdefinierten Eigenschaften. Chrome 138+. Umwickeln Sie das Ergebnis in clamp(0, ..., 1), um die Ausgabe zu begrenzen.

Last updated: 2026-05-30

Einschränkungen

  • progress() erfordert Chrome 138+. Firefox, Safari und ältere Chrome-Versionen unterstützen es nicht. Verwenden Sie scroll-gesteuerte Animations-Keyframes oder JavaScript-basierte Scroll-Listener als Fallbacks für Cross-Browser-Unterstützung.
  • Die Funktion funktioniert nur mit numerischen CSS-Eigenschaften. Sie kann nicht direkt Farbstopps, Verlaufswinkel oder Formfunktionen steuern. Für Farbübergänge kombinieren Sie progress() mit color-mix() unter Verwendung des Fortschrittswerts als Mischprozentsatz.
  • scroll-position in progress() misst standardmäßig die Dokument-Scrollposition, nicht den Scroll-Container eines Elements. Verwenden Sie self-scroll-position für einen bestimmten Scroll-Container, aber stellen Sie sicher, dass der Container scrollbar ist und einen definierten Scroll-Bereich hat.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie die Eingabequelle und ihren Bereich ein — wählen Sie zwischen scroll-position, Viewport-Breite/Höhe, Viewport-Inline-/Blockgröße oder einer benutzerdefinierten CSS-Eigenschaft mit ihren Minimal- und Maximalwerten.
  2. Legen Sie die Ziel-CSS-Eigenschaft und ihren Wert bei Fortschritt 0 und Fortschritt 1 fest — zum Beispiel Opazität 0 bis 1 oder Skalierung 0.5 bis 1.5.
  3. Aktivieren Sie optional die clamp()-Umwicklung, um das Ergebnis innerhalb des Ausgabebereichs zu begrenzen, selbst wenn die Eingabe den definierten Bereich überschreitet.
  4. Kopieren Sie das generierte CSS und fügen Sie es in Ihr Stylesheet ein. Die Ausgabe enthält sowohl die progress()-Regel als auch die vollständige Eigenschaftsdeklaration.

Wofür du es nutzen kannst

  • Steuern Sie die Opazität einer fixierten Kopfzeile von vollständig transparent zu deckend, während der Benutzer 0 bis 200 Pixel nach unten scrollt.
  • Skalieren Sie ein Hero-Bild von 1 auf 1.2, während die Viewport-Breite von 320px auf 1920px wächst, und erzeugen Sie einen subtilen Zoomeffekt auf breiteren Bildschirmen.
  • Steuern Sie einen color-mix()-Mischprozentsatz für den Übergang von einer Farbe zu einer anderen basierend darauf, wie weit der Benutzer durch einen Abschnitt gescrollt hat.

Anwendungsfalle

Praxisbeispiele

Beispiel

Einblenden beim Scrollen mit progress()

Ein Hero-Bereich soll beim Scrollen der ersten 300 Pixel eingeblendet werden. Verwenden Sie progress(scroll-position from 0 to 300) gemappt auf Opazität: Das Element ist am Seitenanfang vollständig transparent (progress=0) und nach 300px Scrollen vollständig deckend (progress=1). Kein IntersectionObserver oder Scroll-Event-Listener erforderlich.

Beispiel

Responsive Kartenskala nach Viewport

Ein Kartenraster soll jede Karte von 0.9 bei 320px Viewport-Breite auf 1.1 bei 1440px skalieren. Verwenden Sie progress(100vw from 320 to 1440) als Eingabe mit scale als Zieleigenschaft. Die Karten wachsen subtil mit der Viewport-Breite und erzeugen ein responsives Raster ohne Media Queries.

Haufige Fehler

  • Progress() zu verwenden, ohne zu erkennen, dass es einen rohen 0-1-Wert zurückgibt — die meisten Eigenschaften benötigen eine zusätzliche calc() oder Skalierung, um den Fortschritt in den gewünschten Ausgabebereich umzuwandeln, aber das Tool erledigt dieses Mapping für Sie.
  • Zu vergessen, dass scroll-position standardmäßig relativ zur Dokument-Scrollposition ist — für den Scroll-Container eines Elements verwenden Sie stattdessen progress(self-scroll-position from 0 to N).
  • Anzunehmen, dass progress() in allen CSS-Eigenschaften funktioniert — es funktioniert in jeder Eigenschaft, die eine Zahl oder einen Prozentsatz akzeptiert, aber nicht direkt in Farbfunktionen wie rgb() (verwenden Sie stattdessen color-mix()).

Überprüfung

  1. Inspizieren Sie das Element in DevTools und bestätigen Sie, dass der berechnete Wert der Zieleigenschaft mit dem erwarteten Wert an bekannten Eingabepositionen übereinstimmt (z.B. genau 200px scrollen und prüfen, ob die Opazität 0.5 für einen 0-bis-400-Bereich beträgt).
  2. Testen Sie die Randfälle: Überprüfen Sie den Eigenschaftswert an den minimalen und maximalen Eingabebereichsgrenzen und testen Sie mit einem Eingabewert außerhalb des Bereichs, um das clamp()-Verhalten zu bestätigen, falls die Umwicklung aktiviert ist.

FAQ

Fragen zu CSS progress()-Funktionsrechner

Wie unterscheidet sich progress() von scroll-gesteuerten Animations-Timelines mit view-timeline?

progress() ist eine reine mathematische Funktion, die einen Zahlenbereich auf 0-1 abbildet — sie hat keine Verbindung zu Animations-Timelines, Keyframes oder animation-range. Verwenden Sie progress() für deklaratives Wert-Mapping in jeder CSS-Eigenschaft, ohne eine scroll-timeline zu erstellen. Verwenden Sie view-timeline und animation-range, wenn Sie vollständige keyframe-basierte scroll-gesteuerte Animationen mit mehreren Schritten, Easing und Richtungssteuerung benötigen.

Was passiert, wenn der Eingabewert außerhalb des definierten Bereichs liegt?

progress() gibt Werte außerhalb von 0-1 zurück, wenn die Eingabe außerhalb des from-to-Bereichs liegt. Zum Beispiel gibt progress(x from 0 to 100) den Wert 1.5 zurück, wenn x=150 ist. Umwickeln Sie das Ergebnis in clamp(0, ..., 1), um die Ausgabe zu begrenzen. Dieses Tool enthält einen optionalen clamp()-Umschalter, um dies automatisch zu handhaben.

Kann progress() benutzerdefinierte Eigenschaften als Eingabe referenzieren?

Ja. Sie können jede CSS-Benutzerdefinierte Eigenschaft als Eingabewert verwenden, wie zum Beispiel progress(--scroll-offset from 0 to 500). Dies ist nützlich, wenn Sie einen Wert basierend auf JavaScript-gesetzten benutzerdefinierten Eigenschaften steuern oder mehrere progress()-Berechnungen durch Zwischeneigenschaften verketten möchten.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren