Cover Hero
ה-hero שוקע למטה בזמן הגלילה, ו-overflow: hidden חותך את מה שיורד, כך שהרקע של הסקשן עצמו עולה מלמטה כמו מסך. שני אטריביוטים, בלי sticky ובלי pin: הסקשן הבא פשוט עולה. חי ב-hero של Verdis.
משתלב טוב עם כניסת מלל בסקשן שאחרי: split או split="blur" על הכותרת שלו. בזמן שה-hero שוקע הכותרת נכנסת, וזה מעצים את האפקט. ה-"Next Section" בדמו למטה עושה בדיוק את זה עם split="".
למעט תוכן בלבד: כותרת ושורה-שתיים. כל התוכן יושב absolute בתוך מסגרת בגובה מסך עם overflow: hidden, אז הוא לא יכול להגדיל אותה. עם יותר תוכן, או בזום גדול בדפדפן (150% ומעלה, שמתנהג כמו מסך קטן), הוא פשוט נחתך. אם צריך יותר: min-height על הסקשן ו-inner בזרימה (לא absolute), כמו ב-hero של Verdis.
<section data-cover-hero="" style={{ height: '100svh', overflow: 'hidden', background: '#1a1814' }}>
<div data-cover-hero-inner="" style={{ position: 'absolute', inset: 0 }}>
{/* full-bleed image + overlay + text */}
</div>
</section>
Next Section
Next Section
It is not a dark-section effect. What rises from the bottom is the section's own background, so any colour works: the two demos above are the same attribute on ink and on cream.
The one thing that has to travel with the colour is the overlay. Build it with color-mix from the same token as the section background, never a hardcoded rgba(0,0,0,…): that is what makes the picture dissolve into the curtain as it sinks. With a black overlay on a light section you get a grey veil that matches nothing and the illusion breaks.
/* section */ background: var(--brand-ink);
/* overlay, mixed from THAT token: swap the token, the fade follows */
background: linear-gradient(to bottom,
color-mix(in oklch, var(--brand-ink) 12%, transparent) 0%,
color-mix(in oklch, var(--brand-ink) 38%, transparent) 55%,
color-mix(in oklch, var(--brand-ink) 92%, transparent) 100%);<section>. Requires overflow: hidden and a height (100svh for a hero).position: absolute; inset: 0. Holds all content: image + text.No sticky: a plain section, scrolled out
| מה | על מי | מה קורה | עד מתי |
|---|---|---|---|
| גדילה | התמונות, עם data-hero-parallax-scale | scale מ-1 לערך שנכתב | עד שתחתית הסקשן בראש המסך |
| שקיעה | העטיפה, data-cover-hero-inner | יורדת בחצי גובה מסך, ו-overflow: hidden חותך | עד שתחתית הסקשן בראש המסך |
| שקיפות | העטיפה, data-cover-hero-inner | opacity עד 0 | עד 85% מהטווח |
