לאיזה תוכןתמונה אחת / שני עימודים (חצי מסך, כרטיס, מילה בכותרת, עיגול, טלפון) / מעט מלל / זורם כשהוא נוחת בעימוד רגיל (טלפון ליד תוכן), פחות כשהוא נגמר במסך מלא
השאלהיש תמונה אחת שעוברת בין שני עימודים (חצי מסך, כרטיס, עיגול, טלפון)?
Morph
תמונה שעפה מעימוד אחד לעימוד אחר בזמן שהמסך עומד. הקומפוננטה לא יודעת מה זה "שמאל" או "מסך מלא": היא מודדת שתי משבצות ומעיפה ביניהן, אז כל וריאציה היא עימוד אחר, לא קוד אחר. הדוגמאות למטה, כולן אותה קומפוננטה, ואחריהן שרשרת, קבוצה וקשת באותה קומפוננטה, ואח אחד: צורה שמשתנה (MorphSVG). בסוף: שרשרת של תחנות.
- המסך ננעל. הסקשן נעצר (CSS sticky) ומראה את העימוד הראשון, עם התמונה במשבצת שלה: חצי מ-50-50, כרטיס, מילה בתוך כותרת.
- התמונה עפה. העימוד הראשון דוהה, והתמונה עפה למשבצת שלה בעימוד השני: מיקום, גודל ועיגול של כל פינה בנפרד. התמונה בתוכה מתיישבת מ-1.2 ל-1.
- העימוד השני נכנס. סביב התמונה שנחתה, עצירה קצרה, והדף ממשיך.
| prop | ברירת מחדל | מה זה |
|---|---|---|
| src | - | התמונה שעפה |
| alt | '' | טקסט חלופי |
| images | - | קבוצה: כמה תמונות במקום src, משבצת לכל אחת בכל עימוד |
| swap | - | תמונה שנייה שמתחלפת עם הראשונה באמצע המעוף הראשון: זום אאוט והחלפה יחד (סנכרון). רק עם src |
| tight | false | הסקשן שאחרי מתחיל ממש מתחת לתוכן של העימוד האחרון, ולא מסך שלם אחר כך: הרווח הריק נמדד ונלקח בחזרה, והסקשן עולה מעל הקרקע ונעצר בתחתית הכרטיס. בלי מספר קבוע. לסקשן שאחרי צריך רקע משלו |
| length | 150svh למעוף | כמה גלילה הכול לוקח |
| ease | 'power1.inOut' | עקומת המעוף (ease של GSAP) |
| arc | 0 | קשת: כמה פיקסלים המעוף מתעקל באמצע (שלילי = למעלה) |
| stagger | 0.06 | קבוצה: ההפרש בין תמונה לתמונה, חלק מהמעוף |
| className | - | על העוטף (רקע כהה, למשל) |
| children | - | העימודים: data-morph-from, כמה data-morph-step שרוצים, data-morph-to |
| markup | מה זה |
|---|---|
| data-morph-from | העימוד בהתחלה. כל HTML ו-CSS |
| data-morph-step | עימוד באמצע: שרשרת. התמונה עוברת בכולם לפי הסדר, עם עצירה קצרה בכל אחד |
| data-morph-to | העימוד בסוף |
| data-morph-slot | בתוך כל עימוד: קופסה ריקה שאומרת לתמונה איפה היא ובאיזו צורה. גודל ו-border-radius ב-CSS (עיגול, גלולה, קשת). rotate על המשבצת: התמונה נוחתת עקומה |
| data-morph-slot="0" | קבוצה: מצמיד משבצת לתמונה לפי המספר. בלי מספר, לפי הסדר |
| data-morph-over | על עימוד שהטקסט שלו יושב על התמונה (כותרת על תמונה במסך מלא): מעלה אותו מעליה |
| data-morph-shade | מכהה את התמונה מתחת לטקסט, כדי שיהיה קריא: גרדיאנט מלמטה. ="full" לשכבה אחידה. נעלם יחד עם העימוד, אז התמונה נוחתת נקייה בעימוד הבא. עוצמה: --uk-morph-shade |
כל דוגמה היא שני מסכים של אותו מקום: איך הוא נראה בהתחלה, ואיך בסוף. בכל אחד משבצת ריקה לתמונה. הקומפוננטה מודדת את שתי המשבצות, והתמונה עפה מהראשונה לשנייה בזמן שהמסך עומד. זה הכול: כל הדוגמאות למטה הן אותו קוד, רק עימוד אחר.
קירות של זכוכית
הסלון והמטבח נפתחים לחצר, והאור נכנס מכל הכיוונים לאורך כל היום.
האור, בכל חדר
<UkMorph src="/house.jpg" length="160svh">
{/* the screen at the start */}
<div data-morph-from>
<div className="mx-split">
<div data-morph-slot className="mx-slot-tall" /> ← where the picture starts
<div className="mx-copy">…</div>
</div>
</div>
{/* the same screen at the end */}
<div data-morph-to>
<div data-morph-slot className="mx-slot-full" /> ← where it lands
<p className="mx-caption">…</p>
</div>
</UkMorph>אותו HTML בדיוק, פעמיים. לפני: מה שכתבת, בלי המנגנון: שני מסכים רגילים אחד אחרי השני, והתמונה יושבת במשבצת בכל אחד. אחרי: אותם שני מסכים בתוך UkMorph: הם נערמים למסך אחד שעומד, והתמונה עפה מהמשבצת של הראשון לזו של השני.
בית שפונה לשמש
שתי קומות של זכוכית, מרפסת בכל קומה, והבית כולו פונה דרומה.
ובריכה לכל האורך
הבריכה צמודה לסלון, ומהמרפסת בקומה השנייה רואים את כולה.
קירות של זכוכית
הסלון והמטבח נפתחים לחצר, והאור נכנס מכל הכיוונים לאורך כל היום.
האור, בכל חדר
בית שפונה לשמש
שתי קומות של זכוכית, מרפסת בכל קומה, והבית כולו פונה דרומה.
ובריכה לכל האורך
הבריכה צמודה לסלון, ומהמרפסת בקומה השנייה רואים את כולה.
החוף
שלושה פרויקטים על המים
נווה ים
חוף התכלתבתי המרינה
״חיפשנו שקט, ומצאנו אותו כאן. בערב פשוט יושבים במרפסת ומסתכלים על הגלים.״משפחת לוי, דיירים מ-2022
בית מול הים
שלושה חדרי שינה, כולם מול הים
שבוע אחד על קו החוף
בבוקר ריצה על הטיילת, בצהריים קפה מול המרינה, ובערב ארוחה בנמל הדייגים. הכול במרחק הליכה מהבית.
אספנו את המקומות שהדיירים שלנו הכי אוהבים, מהמאפייה הקטנה ועד בית הספר לגלישה.
הים, לכל הרוחב
חלון פנורמי אחד לאורך כל הסלון, בלי עמודים ובלי מסגרות באמצע.
כל הבניין בכף היד
פתיחת שער, הזמנת חדר כושר ותשלום ועד הבית, מאפליקציה אחת.
כל חלון הוא נוף
חלון לים, בכל חדר
שרשרת, קבוצה, קשת וצורה
- שרשרת.
data-morph-stepבין from ל-to: תמונה אחת עוברת בכמה עימודים, עם עצירה בכל אחד. - קבוצה.
imagesבמקוםsrc, ומשבצת לכל תמונה: כולן עפות יחד, בהפרש קטן. - קשת.
arcמעקם את המעוף, ו-rotateעל המשבצת מנחית את התמונה עקומה, כמו תמונה שנזרקה על שולחן. - צורה.
UkShapeMorph: המסגרת של התמונה משנה צורה בגלילה (כתם, קשת, מלבן). בלי sticky, בלי אורך גלילה.
בית אחד, שלוש נקודות מבט
קירות של זכוכית
הסלון נפתח לחצר, והאור נכנס מכל הכיוונים לאורך כל היום.
ועוד שני בתים על המים
נווה יםחוף התכלתשלושה בתים
שלושה בתים, מבט אחד
כל תמונה היא יום על החוף
אספנו את הרגעים שהדיירים שלנו שלחו, מהבוקר הראשון ועד השקיעה האחרונה של העונה.
ארבע תחנות, תמונה אחת
הבית מבחוץ
חזית לבנה, גג שטוח, ומרפסת שפונה לשקיעה.
אותה תמונה, בצד השני
אותו לייאאוט במראה: הטקסט קודם, המשבצת אחריו.
ונוחתת בחלון
לאיזה תוכןתמונה אחת / שני עימודים (חצי מסך, כרטיס, מילה בכותרת, עיגול, טלפון) / מעט מלל / זורם כשהוא נוחת בעימוד רגיל (טלפון ליד תוכן), פחות כשהוא נגמר במסך מלא
השאלהיש תמונה אחת שעוברת בין שני עימודים (חצי מסך, כרטיס, עיגול, טלפון)?
