Sticky
משהו נשאר על המסך בזמן שהדף עובר לידו. בשתי דרגות: בלי קוד, כשמה שנשאר לא מתחלף, ועם GSAP, כשהוא מתחלף לפי הטקסט שהגיע לאמצע.
<UkStickyScenes items={[
{ scene: <img src="/a.jpg" alt="" />, content: <><h3>...</h3><p>...</p></> },
{ scene: <img src="/b.jpg" alt="" />, content: <><h3>...</h3><p>...</p></> },
]} />שום דבר לא ננעל, והדף ממשיך לזוז עם הגלילה. זה ההבדל מ-Panel Scroll, ששם המסך עומד וקשה להבין שהגלילה עובדת. scene הוא slot: היום תמונה, ומחר ממשק קטן עם אנימציה משלו. בטלפון אין במה: כל סצנה יושבת מעל הטקסט שלה.
בלי קוד: הכותרת נשארת
קלאס אחד על העמודה הקצרה, uk-sticky-head, בלי סקריפט: היא נשארת על המסך ולידה עוברת רשימה ארוכה. שום דבר לא מתחלף. מתחת ל-960 היא נגללת כרגיל. כשמה שנשאר צריך להתחלף עם הטקסט, זה השלב הבא, למטה.
<div className="grid grid-cols-1 *:min-w-0 gap-(--uk-grid-gutter-lg) uk-m:grid-cols-2">
<div className="uk-sticky-head"><h2>…</h2><p>…</p></div>
<div>the list, taller than the screen</div>
</div>
חדר המגורים
חלל פתוח עם חלונות גדולים, שמכניס אור במשך רוב היום.
המטבח
מטבח מאובזר עם משטח עבודה ארוך לאורך החלון.
המרפסת
מרפסת רחבה עם נוף פתוח, שנעים לשבת בה גם בערב.
הלובי
לובי מעוצב בכניסה לבניין, עם פינת ישיבה לאורחים.
תחומי העיסוק
המשרד מלווה עסקים ואנשים פרטיים.
דיני עבודה
הסכמי העסקה, סיום העסקה וזכויות עובדים, בצד של העובד ובצד של המעסיק.
נדל"ן
ליווי בקנייה ובמכירה של דירה, מהבדיקות הראשונות ועד הרישום בטאבו.
חוזים
ניסוח ובדיקה של הסכמים בין עסקים, ספקים ושותפים.
תביעות אזרחיות
ייצוג בבית המשפט, וגישור כשאפשר לסיים את הסכסוך בלעדיו.
ליווי עסקים
ייעוץ שוטף לעסקים קטנים ובינוניים, מפתיחת החברה ואילך.
ירושות
צוואות, צווי ירושה וסכסוכים בין יורשים.
יום אחד, מהבוקר עד הלילה
אלבום של חתונה, כמו שהיא התרחשה.
הטבעות
הפרטים הקטנים של הבוקר, לפני שכולם מגיעים.
הזר
הזר, רגע לפני הטקס.
השולחן
כל האורחים סביב שולחן ארוך אחד.
הרחבה
הערב עצמו, עד הריקוד האחרון.
טיפול פנים עמוק
מה קורה בטיפול
מתחילים בשיחה קצרה על העור ועל מה שמפריע לכם, ובהתאם בוחרים את התכשירים. אחרי ניקוי עמוק ועיסוי פנים עדין מניחים מסכה מרגיעה, ובסוף קרם הגנה.
למי זה מתאים
לעור יבש, שמן או רגיש, וגם למי שרוצה פשוט שעה של מנוחה. אם יש טיפול רפואי בעור, כדאי לספר עליו מראש ונתאים את הטיפול אליו.
אחרי הטיפול
העור עשוי להיות מעט אדום בשעות הראשונות, וזה עובר לבד. כדאי להימנע מאיפור ומשמש ישירה עד הבוקר שאחרי, ולהמשיך עם קרם לחות והגנה בבית.
עם GSAP: מה שנשאר מתחלף
תכנון
מתחילים מהדירה כמו שהיא: מדידות, סדר החדרים ומה חשוב לכם שיישאר.
עיצוב
חומרים, צבעים ותאורה, עם הדמיה של כל חלל לפני שמתחילים לעבוד.
ביצוע
ליווי בשטח מול בעלי המקצוע, עד שהתוכניות נראות כמו שסיכמנו.
מסירה
עוברים יחד על כל חדר, ומקבלים את המפתחות לבית מוכן.
אותו דבר עם wipe
transition="wipe": המעבר צמוד לגלילה. נראה שהתמונה הבאה עולה, אבל שום דבר לא זז: כל הסצנות עומדות באותו ריבוע, העליונה נחתכת מלמטה למעלה, והתוכן של שתיהן גולש קצת בתוך המסגרת.
ground על כל פריט: גם הרקע של הסקשן עובר מצבע לצבע, צמוד לאותה גלילה. פועל בכל סוגי ה-transition, ומוצג רק כאן.
תכנון
מתחילים מהדירה כמו שהיא: מדידות, סדר החדרים ומה חשוב לכם שיישאר.
עיצוב
חומרים, צבעים ותאורה, עם הדמיה של כל חלל לפני שמתחילים לעבוד.
ביצוע
ליווי בשטח מול בעלי המקצוע, עד שהתוכניות נראות כמו שסיכמנו.
מסירה
עוברים יחד על כל חדר, ומקבלים את המפתחות לבית מוכן.
backdrop: הרקע הוא התמונה עצמה
backdrop: מאחורי כל הסקשן, התמונה של הסצנה הפעילה בגדול, עם blur ושכבת overlay. כשהסצנה מתחלפת גם החדר מתחלף, שינוי נושא מוחלט. צמוד לאותה גלילה של wipe. המלל בסקשן בהיר.
תכנון
מתחילים מהדירה כמו שהיא: מדידות, סדר החדרים ומה חשוב לכם שיישאר.
עיצוב
חומרים, צבעים ותאורה, עם הדמיה של כל חלל לפני שמתחילים לעבוד.
ביצוע
ליווי בשטח מול בעלי המקצוע, עד שהתוכניות נראות כמו שסיכמנו.
מסירה
עוברים יחד על כל חדר, ומקבלים את המפתחות לבית מוכן.
עוד משהו שזז
accent על פריט: עוד דבר על הבמה, על הפינה של המסגרת ומעבר לה. לרוב תמונה שקופה, כדי שלא יהיה צריך למצוא עוד תמונה. הוא מתחלף על אותה גלילה ועובר מרחק גדול יותר מהסצנה, וזה מה שנותן עומק. פועל בכל סוגי ה-transition.
{ scene: <img src="/a.jpg" alt="" />, accent: <img src="/cutout.webp" alt="" />, content: <>...</> }ולפעמים נחמד להראות התקדמות: UkTracker בפינה. הוא לא שייך לרכיב הזה: נותנים לו אלמנט, והוא מגיב להתקדמות שלו. הדף שלו.
<UkStickyScenes id="steps" items={...} onStage={<UkTracker target="#steps" />} />
תכנון
מתחילים מהדירה כמו שהיא: מדידות, סדר החדרים ומה חשוב לכם שיישאר.
עיצוב
חומרים, צבעים ותאורה, עם הדמיה של כל חלל לפני שמתחילים לעבוד.
ביצוע
ליווי בשטח מול בעלי המקצוע, עד שהתוכניות נראות כמו שסיכמנו.
מסירה
עוברים יחד על כל חדר, ומקבלים את המפתחות לבית מוכן.
ואותו דבר עם שיידר
transition="shader" shader="ripple": אותה במה ואותו מבנה, והמעבר הוא שיידר של WebGL, צמוד לגלילה. זה הלגו: המעבר הוא ערך אחד. רק לסצנות שהן תמונה, והתמונות באותו יחס. בלי WebGL זה נשאר crossfade.
תכנון
מתחילים מהדירה כמו שהיא: מדידות, סדר החדרים ומה חשוב לכם שיישאר.
עיצוב
חומרים, צבעים ותאורה, עם הדמיה של כל חלל לפני שמתחילים לעבוד.
ביצוע
ליווי בשטח מול בעלי המקצוע, עד שהתוכניות נראות כמו שסיכמנו.
מסירה
עוברים יחד על כל חדר, ומקבלים את המפתחות לבית מוכן.
Props
| prop | default | מה זה |
|---|---|---|
| items | - | לכל פריט scene (מה שעל הבמה) ו-content (הטקסט). ground אופציונלי: הצבע של ה-section סביב הבלוק כשהסצנה דולקת, כל צבע CSS. עובד רק אם לכל הפריטים יש ground. accent אופציונלי: עוד דבר שזז על הבמה, לרוב תמונה שקופה |
| flip | false | מחליף בין צד הבמה לצד הטקסט |
| transition | 'fade' | איך סצנה מתחלפת. 'fade': הטקסט מדליק אותה וה-crossfade רץ לבד. 'wipe': צמוד לגלילה, הסצנה נחתכת מלמטה וחושפת את הבאה. 'shader': צמוד לגלילה, דרך השיידרים של UkShaderCross, רק לתמונות |
| backdrop | false | מאחורי הסקשן, התמונה של הסצנה הפעילה, מטושטשת מתחת ל-overlay. רק לתמונות. טוקנים: --uk-sticky-scenes-blur, --uk-sticky-scenes-overlay |
| onStage | - | slot על הבמה, מעל הסצנות, למה שנשאר לאורך כולן: UkTracker, למשל |
| shader | 'peel' | ב-transition="shader": איזה שיידר, השמות של UkShaderCross |
טוקנים: --uk-sticky-scenes-stage גובה הבמה, --uk-sticky-scenes-gap הרווח בין העמודות, --uk-sticky-scenes-item גובה טקסט, כלומר כמה זמן הסצנה שלו על המסך, --uk-sticky-scenes-accent רוחב ה-accent.
