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

Push Under

סקשן שנדחק מתחת לסקשן הבא. אפקט אחד, קומפוננטה אחת: UkPushUnder, על כל סקשן בכל גובה. CSS sticky, בלי GSAP pin, אז אין קפיצה כשהוא ננעל.

Aהסקשן שבתוך UkPushUnder. הוא זה שננעל, מתכווץ ודוהה.
Bהסקשן שמיד אחריו בדף. הוא רק עולה מעל A, בגודל מלא. לו לא קורה כלום.

גללו דרך שני המלבנים למטה, ואז כל שורה בטבלאות אומרת אם היא על A או על B.

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

אני בתוך UkPushUnder: ננעל, עולה קצת, מתכווץ ודוהה

אני הסקשן הבא: עולה מעל A, בגודל מלא

מה זה עושה, לפי הסדר

1
A נגלל רגיל. עד שהתחתית של A מגיעה לתחתית המסך. A גבוה ממסך נקרא עד הסוף קודם; A בגובה מסך בדיוק ננעל ברגע שהוא ממלא אותו.
2
A ננעל במקום. ונשאר עומד למשך length של גלילה (ברירת מחדל: מסך אחד).
3
B עולה מעל A. B מחליק למעלה ומכסה את A. באותו זמן התוכן של A עולה ב-rise, מתכווץ ל-scaleTo ודוהה ל-opacityTo. ל-B עצמו לא קורה כלום: הוא רק עולה, בגודל מלא.
4
הדף ממשיך. כש-B כיסה את המסך, A נגלל החוצה מתחתיו.

ל-B לא צריך לעשות כלום: ה-CSS נותן לאלמנט שמיד אחרי UkPushUnder מיקום, z-index ורקע, כדי שיצויר מעל A. אם יש ל-B רקע משלו (class, CSS של הדמו), שלו מנצח. רק לוודא שמה שבא מיד אחרי הוא באמת B, לא spacer.

UkPushUnder

import UkPushUnder from '@/components/uikit/UkPushUnder'

<UkPushUnder rise="40vh" scaleTo={0.92} opacityTo={0.3}>
  <section>A: any section, any height (locks, shrinks, fades)</section>
</UkPushUnder>
<section>B: the next section (rises over A, unchanged)</section>

prop	ברירת מחדל	מה זה עושה
`children`	`-`	A: הסקשן שנדחק (כל סקשן, בכל גובה)
`rise`	`'40vh'`	כמה התוכן של A עולה בזמן ש-B מכסה אותו (כל יחידת CSS)
`scaleTo`	`0.92`	לאיזה גודל A מתכווץ (1 = לא מתכווץ)
`opacityTo`	`0.3`	לאיזו שקיפות A דוהה (1 = לא דוהה)
`length`	`'100svh'`	כמה גלילה A נשאר נעול, כלומר כמה זמן לוקח ל-B לכסות אותו. לא יותר מהגובה של B: אם B קצר יותר, הנעילה נחתכת לגובה שלו, אחרת A היה מציץ מתחתיו
`ease`	`'none'`	עקומת התנועה של A (ease של GSAP). none = צמוד לגלילה בדיוק
`className`	`-`	על העוטף של A

token (CSS)	מה זה עושה
`--uk-push-under-bg`	הרקע שנחשף מאחורי A כשהוא מתכווץ (ברירת מחדל: --background)
`--uk-push-next-bg`	רקע ל-B אם אין לו רקע משלו (ברירת מחדל: --background)

דוגמה 1

UkPushUnder · סקשן רגיל

A: סקשן "אודות" גבוה ממסך, נגלל עד הסוף וננעל. B: "העבודות שלנו", עולה מעל A.

סטודיו שבונה מותגים דיגיטליים לאורך זמן.

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

עוד עלינו

העבודות
שלנו

דוגמה 2

UkPushUnder · שני פוסטרים

A: הפוסטר STAY, ננעל. B: הפוסטר PUSH, עולה מעל A עם צל. תנועה עדינה יותר: rise="15vh" scaleTo={0.95} opacityTo={0.15}

STAY

הסקשן הזה ננעל, נדחק למעלה, מתכווץ ומתעמעם.

PUSH

הסקשן הבא: עולה מלמטה ומכסה את STAY.

דוגמה 3

UkPushUnder · בלי הקטנה

A עומד כמו שהוא, בלי לזוז, להתכווץ או לדעוך, ו-B נסגר מעליו: rise="0" scaleTo={1} opacityTo={1}

אני עומד במקום, וזהו

אני נסגר מעל A, בגודל מלא

דוגמה 4

UkPushUnder · שרשרת

שלושה כרטיסים ברצף, כל אחד עולה מעל הקודם, בסגנון fullpage.js: כל כרטיס חוץ מהאחרון עטוף ב-UkPushUnder. חי בבית הנדל"ן של הכנס, במסלולים.

והדף ממשיך

תוכן רגיל, בלי markup מיוחד.