Wat is CSS progress() Functiecalculator?
De CSS progress()-functie is een wiskundige mappingfunctie (Chrome 138+) die een invoerwaarde uit een numeriek bereik omzet in een voortgangswaarde tussen 0 en 1. Bijvoorbeeld: progress(scroll-position from 0 to 500) retourneert 0 wanneer de scrollpositie 0 is, 1 bij 500 en 0,5 bij 250. Deze voortgangswaarde kan elk numeriek CSS-attribuut aansturen, waardoor complexe calc()-ketens voor scroll-gerelateerde effecten, viewport-relatieve formaatbepaling en interpolatie van eigen attributen overbodig worden.
Snel antwoord
Gebruik CSS progress(input from min to max) om een numerieke waarde om te zetten naar een 0-1 voortgangsbereik. Stuur opacity, scale, transform, color-mix percentages of elk getal-accepterend CSS-attribuut aan op basis van scrollpositie, viewport-afmetingen of eigen attributen. Chrome 138+. Wikkel in clamp(0, ..., 1) om de uitvoer te begrenzen.
Last updated: 2026-05-30
Beperkingen
- progress() vereist Chrome 138+. Firefox, Safari en oudere Chrome-versies ondersteunen het niet. Gebruik scroll-driven animation keyframes of JavaScript-gebaseerde scroll-luisteraars als fallback voor cross-browser-ondersteuning.
- De functie werkt alleen met numerieke CSS-attributen. Het kan niet direct kleurstops, verloophoeken of shape-functies aansturen. Combineer voor kleurovergangen progress() met color-mix() met de voortgangswaarde als mengpercentage.
- scroll-position in progress() meet standaard de documentscrollpositie, niet die van een element. Gebruik self-scroll-position voor een specifiek scrollbaar element, maar zorg ervoor dat het element scrollbaar is en een gedefinieerd scrollbereik heeft.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Voer de invoerbron en het bereik in —kies uit scroll-position, viewport width/height, viewport inline/block size of een eigen CSS-attribuut met de minimum- en maximumwaarden.
- Stel het doel-CSS-attribuut in dat u wilt aansturen en de waarde bij voortgang 0 en voortgang 1 —bijvoorbeeld opacity van 0 naar 1, of scale van 0,5 naar 1,5.
- Schakel optioneel clamp()-omhulling in om het resultaat binnen het uitvoerbereik te houden, zelfs wanneer de invoer het gedefinieerde bereik overschrijdt.
- Kopieer de gegenereerde CSS en voeg deze toe aan uw stylesheet. De uitvoer bevat zowel de progress()-regel als de volledige attribuutdeclaratie.
Waarvoor je het kunt gebruiken
- Stuur de dekking van een sticky header van volledig transparant naar dekkend naarmate de gebruiker van 0 naar 200 pixels naar beneden scrollt.
- Schaal een heldenafbeelding van 1 naar 1,2 naarmate de viewportbreedte groeit van 320px naar 1920px, voor een subtiel zoomeffect op bredere schermen.
- Stuur een color-mix()-mengpercentage aan om van de ene kleur naar de andere over te gaan op basis van hoe ver de gebruiker door een sectie heeft gescrolld.