פס בראש המסך שמתמלא עם התקדמות הגלילה. מומש כולו ב-CSS עם animation-timeline: scroll().
מתי משתמשים: מאמרים ועמודים ארוכים. תמיכת דפדפן: כרום ואדג' (פיירפוקס וספארי בדרך; יש fallback JS בפרויקטים).
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
גלול וצפה בפס למעלה מתמלא. אפס JavaScript.
הקסם: animation-timeline: scroll() קושר את האנימציה לגלילת העמוד.
וזה כל הסיפור.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית. הרכיב הזה מסתמך על dir="rtl".
/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
/* CSS17 · פס התקדמות קריאה */
.rprog{position:fixed;top:0;inset-inline:0;height:4px;background:linear-gradient(90deg,var(--accent, #4a3aff),#c2255c);transform-origin:right;transform:scaleX(0);animation:grow linear;animation-timeline:scroll();z-index:99}
html[dir="ltr"] .rprog{transform-origin:left}
@keyframes grow{to{transform:scaleX(1)}}
.longtext{max-width:640px;margin-inline:auto;color:var(--muted, #6a6d85);padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.longtext p{margin:0 0 60vh}<div class="rprog"></div>
<div class="stage tight longtext">
<p>גלול וצפה בפס למעלה מתמלא. אפס JavaScript.</p>
<p>הקסם: animation-timeline: scroll() קושר את האנימציה לגלילת העמוד.</p>
<p>וזה כל הסיפור.</p>
</div>