Section Clip
אטריביוט אחד, data-section-clip, עם ערך לכל דרך של פתיחה. clip-path, אז התוכן בפנים לא זז ולא נמתח.
| הקוד | מה זה עושה |
|---|---|
data-section-clip="" | סקשן נפתח ממסגרת קטנה לרוחב מלא, בגלילה |
data-section-clip="pin" | אותו דבר, עומד מסך אחד |
data-section-clip="container" | הפוך: נכנס ברוחב מלא ונסגר לרוחב הקונטיינר |
data-section-clip="arch" | הקצה העליון עולה ככיפה ומתיישר |
data-section-clip="arch-over" | אותה כיפה, חתוכה מהסקשן עצמו: בפינות רואים את הסקשן המוחזק שמתחת |
data-section-clip="arch-bottom" | הקצה התחתון יורד ככיפה ומתיישר, וחושף את מה שמתחת |
uk-clip-scene | תמונה מתחת למלל ממורכז, בגובה מסך, לסקשן שנפתח |
1 · pin: נעצר מסך אחד בזמן שהוא נפתח
הפאנל עומד מסך אחד בזמן שה-clip נפתח, ואז ממשיך בגלילה מלא. CSS sticky, לא GSAP pin, אז אין קפיצה כשהוא ננעל. שמים את האטריביוט על מסילה, והילד הראשון שלה הוא הפאנל.
<div data-section-clip="pin">
<div>…full-screen content…</div>
</div>
/* scroll length (default 100svh) */
--uk-section-clip-distance: 100svh;
/* where the pane stops: by itself under a navbar that stays on screen
(UkNavbar fixed / sticky), else 0. Override only for something else. */
--uk-section-clip-top: 0px;2 · רק גלילה: נפתח תוך כדי שהוא נכנס
בלי עצירה: מתחיל כמסגרת קטנה כשהוא נכנס למסך ונפתח למסך מלא עד שהראש שלו מגיע לראש המסך. מתאים לתמונה רחבה עם כותרת אחת, לא לסקשן של טקסט.data-clip-start / data-clip-end משנים את חלון הגלילה.
<div data-section-clip="">…</div>3 · container: הפוך, נסגר לרוחב הקונטיינר
הכיוון ההפוך: הרצועה נכנסת ברוחב מלא ותוך כדי שהיא עולה נסגרת לרוחב של ה-.uk-container שבתוכה, עם הרדיוס הגלובלי. עםdata-clip-to="content" היא נסגרת לקו התוכן של הקונטיינר (בתוך הריווח שלו), כך שהקצוות שלה פוגשים את הלוגו ואת הטקסט של שאר הסקשנים; לתוכן ממורכז כמו CTA (ב-/about). כשהיא סגורה היא כרטיס על הדף, אז היא מקבלת גם מרווח מתחת: הריווח הצידי של הקונטיינר (40px), לא המרווח בצדדים שגדל עם המסך. בדסקטופ בלבד: בטלפון הרצועה נשארת מלאה ובלי מרווח. מתאים לרצועת CTA או לסקשן סוגר.
<section data-section-clip="container" class="bg-black">
<div class="uk-container">…</div>
</section>יש לכם פרויקט?
בואו נדבר.
4 · arch: עולה עם ראש של כיפה שמתיישר
הסקשן עולה כשבשתי הפינות העליונות שלו הצבע של הסקשן שמעליו, והכיפה משתטחת לקו ישר עד שהוא מגיע ל-10% מראש המסך. הצבע נקרא לבד, אז זה נראה רק מעל רקע אחר. כל רוחב, ובלי אנימציה זה סקשן רגיל.
<section data-section-clip="arch">…</section>
--uk-section-clip-arch: 160px; /* the dome's height, default min(15vw, 220px) */
--uk-section-clip-arch-color: #111; /* the corners' colour, default the section above */archמעל צבע אחיד: הפינות נצבעות באפור של הסקשן שמעל. נקי.archמעל תמונה: הפינות עדיין צבע אחד, והקצה העליון שלהן קו ישר על התמונה. הבאג.arch-overהכיפה חתוכה מהירוק, ובפינות רואים את התמונה עצמה. רק כשהיא מוחזקת מתחת.arch-bottomהתחתון: הירוק נתלה ככיפה מעל האפור שמתחתיו, ומתיישר כשהוא יוצא.הפינות הן צבע, לא חור
archמצייר את הפינות בצבע אחד. מעל סקשן בצבע אחיד זה מושלם. מעל תמונה, הקצה העליון של הפינות נראה כקו ישר.arch-overחותך את הכיפה מהסקשן עצמו, ובפינות רואים את מה שבאמת מתחת. זה עובד רק כשהסקשן שמעליו מוחזק מתחתיו (UkPushUnder, סצנה סטיקית). אחרת אין מתחת כלום חוץ מהדף.- לא לכסות את הקו בגרדיינט. מעל צבע כהה זה נבלע, אבל מעל תמונה עמוסה (ערימת תפוזים בזום) רואים מריחה מוזרה. אם הסקשן שמעל הוא תמונה, מחזיקים אותו ועוברים ל-
arch-over.
מלמעלה, מעל צבע אחיד: arch
הסקשן השחור מעל, והפינות נצבעות בשחור שלו.
מלמעלה, מעל תמונה: arch-over
הליים מוחזק מתחת, והכיפה חתוכה מהסקשן הזה: בפינות רואים את הליים עצמו.
מלמטה: arch-bottom
התחתית של הסקשן הזה נתלית ככיפה ומתיישרת, וחושפת את הליים שחיכה מתחת. הליים מתחיל מוחשך ומתבהר כשהוא נחשף (data-shade-overlay על enter), והתוכן שלו עולה מלמטה למקומו (data-movement from): רחוק, ואז קרוב. כמו הפוטר של KILN.
