<Component />While scrollingsticky-basedירידת דור במובייל

Stack Cards

כל כרטיס הוא position: sticky עם top מצטבר. JS קטן מודד כמה כרטיסים מעל וכל אחד מקבל scale +opacity פוחתים בהתאם, אפקט עומק "deck of cards".

Note: רוצה גרסה זירו-JS בלי ה-scale/opacity? היא למטה בעמוד הזה.

endSpacer (default 8vh): ריווח קטן אחרי הכרטיס האחרון, רק כדי שה-fade-out שלו ייקרא לפני שהפדינג של הסקשן העוטף נכנס. הסקשן שעוטף את הרכיב כבר מוסיף padding-top/bottom משלו, אז השאירו את זה נמוך.

<UkStackCards items={[
  { color: '#000', title: '01', body: '...' },
  { color: '#fff', title: '02', body: '...', href: '/somewhere' },
]} />

Card One

הראשון נדבק קודם. השאר ייכנסו אחריו.

01 / 04

Card Two

הסטיקי מקבל offset גדול יותר, אז הוא יידבק מתחת לקודם.

02 / 04

Card Three

בלי שום JS לסטיקי עצמו, רק לטיפול ב-scale/opacity.

03 / 04

Card Four

כל כרטיס שומר מקומו, ולא משנה כמה תגלול.

04 / 04

פתרון ללא קוד במידת הצורך

Each card is position: sticky with the same top offset, so cards pile on top of each other as you scroll. No JS, no scroll-trigger. The whole mechanism (in uk-components.css) is one rule:

.uk-sticky-stack .uk-sticky-card {
  position: sticky;
  top: calc(var(--sticky-top) + var(--i, 0) * var(--sticky-peek));
}

Wrapper tunables (set on .uk-sticky-stack): --sticky-top (30vh, mid-viewport) · --sticky-peek (14px) · --sticky-gap (1.5rem, between cards, last card excluded). Pass the card index via style={{ '--i': i }}.

Mobile defaults to position: static (sticky + overflowing card content traps the reader). Opt-in to sticky on mobile via .uk-sticky-stack--mobile.

First card sticks

Scroll down, this card pins at ~30vh.

Second slides over

It stops 14px lower, so you see a peek of card 01.

Third covers both

Same rule, next --i. Stacks until the section leaves.

Release on exit

Sticky releases when the parent container scrolls past.

Live example: meridian_15_05 home → "העקרונות שלנו".

בעומק, בלי סטיקי: rotateX

אותו רעיון, ערימה, בלי שום דבר שנעצר. כל כרטיס נעמד משכיבה לאחור, עולה לכיוון המצלמה ושוקע לעומק, ומפגר מעט אחרי הגלילה, אז הבא מכסה אותו. הרשימה גוללת רגיל. בעיקר יפה, לא שימושי: נועד לפוזה. מלל על הכרטיס נראה בזווית רגילה בערך שנייה, אז רק תמונות.

<div data-rotate-x-stack>              {/* each child an item, its first child the card */}
  <div><figure>…</figure></div>
  <div><figure>…</figure></div>
</div>
/* the card: backface-visibility: hidden; the section: overflow-x: clip */

אחרי הערימה

תוכן רגיל ממשיך.