דילוג לתוכן הראשי
Overview|Storytelling|Entrances|Depth on Scroll|WOW|Section Transitions|Page Transitions|Loaders|Mouse & Hover|Infrastructure|How it works
On arrival💥 OV 2-4

Loaders

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

LoaderSplitLoaderFillLoaderCountLoaderFlashLoaderBarLoaderDawnLoaderFrameexit="shader"Your ownבדמואים

#gsap-page-loader

UkPageLoader

<Component />On load

לאיזה תוכןאתר שהפתיחה היא חלק מהרושם שלו (סטודיו, מותג, פורטפוליו), לא אתר שמחפשים בו טלפון

השאלהשווה למבקר לחכות כשתי שניות בכניסה הראשונה בשביל רגע פתיחה?

<UkPageLoader><LoaderCount /></UkPageLoader>            // usually on the home alone
<UkPageLoader exit="hole" minTime={2.4}><LoaderFill text="..." /></UkPageLoader>
<UkPageLoader><MyLottie /></UkPageLoader>               // anything

Holds the page ~2s even when loaded: one per site, on the home

The progress is fake: 85, then 100 on load; out after 5s regardless

מה ה-slot מקבל

--uk-page-loader-progressמ-0 עד 1, על המסך. כל CSS יכול לקרוא אותו
[data-page-loader-count]אלמנט שמקבל את האחוזים כטקסט
[data-leaving]נוסף למסך כשהיציאה מתחילה: מכאן ה-CSS של ה-slot יודע לצאת

ה-hero נכנס יחד עם היציאה

בלי trigger_box ו-split על אותם אלמנטים. דוגמה מלאה (חלון חדש)

data-loader-zoomהתמונה מתיישבת מ-1.2. ההורה שלה חותך
data-loader-in="down"טשטוש, ומלמעלה
data-loader-in="end"טשטוש, ומהצד של סוף השורה
data-loader-split="chars"אותיות מתוך מסיכה, בסדר אקראי
data-loader-split="lines"שורות מתוך מסיכה
data-loader-riseגדל מלמעלה למטה, בזה אחר זה

Props

propdefaultמה זה
children-מה שעומד על המסך: כל דבר. מוכנים ב-looks
exit'curtain'איך הוא חושף את הדף: 'curtain' עולה, 'fade' נעלם, 'hole' חלון בצורת shape גדל על המסך, 'shader' אפקט קורע את המסך ודרכו רואים את הדף
shader'squares'ב-exit="shader": כל שם מרשימת השיידרים. לאפקטים עם קצה שזז יש חורים של ממש. השאר מערבבים את כל המסך בבת אחת, ועל צבע אחיד זה fade רגיל
shape-ב-hole: צורת החלון, תמונה עם רקע שקוף, למשל לוגו ב-SVG. ברירת המחדל מלבן מעוגל. ב-hole רואים רק מה שבתוך החלון, אז מה שב-slot צריך להיות במרכז
label'טוען'לקוראי מסך
oncetrueפעם אחת לטאב לכל כתובת, ורק בטעינה אמיתית. רענון, או הגעה בלינק מדף פנימי, נכנסים ישר
minTime0.8שניות, הזמן המינימלי על המסך. לאודר שכל האפקט שלו הוא ההתקדמות צריך בערך 2.4, אחרת בטעינה מהירה בקושי רואים אותו
slotTime0.3שניות שיש ל-slot לצאת, מ-[data-leaving] ועד שהמסך זז
onDone-אחרי שהוא התרומם. מחוץ ל-React: האירוע uk-page-loader:done על window, ובזמן שהוא עומד יש data-page-loader על html, כדי שרכיב אחר יוכל לחכות לו

טוקנים: --uk-page-loader-bg המסך, --uk-page-loader-ink מה שעליו, --uk-page-loader-hole רוחב החלון, --uk-page-loader-z.

#loader-split

LoaderSplit

<Component />On load
<UkPageLoader><LoaderSplit words={['סטודיו', 'לאדריכלות']} images={[…]} /></UkPageLoader>
עם ה-hero (חלון חדש)

#loader-fill

LoaderFill

<Component />On load
<UkPageLoader exit="hole"><LoaderFill text="סטודיו" /></UkPageLoader>

The top of the page must look like its last frame

עם ה-hero (חלון חדש)

#loader-count

LoaderCount

<Component />On load
<UkPageLoader><LoaderCount /></UkPageLoader>

#loader-flash

LoaderFlash

<Component />On load
<UkPageLoader><LoaderFlash images={[…]} title="סטודיו לאדריכלות" /></UkPageLoader>   // small pictures: they load with the page

#loader-bar

LoaderBar

<Component />On load
<UkPageLoader exit="fade"><LoaderBar /></UkPageLoader>

#loader-dawn

LoaderDawn

<Component />On load
<UkPageLoader><LoaderDawn title="סטודיו" tagline="תכנון ועיצוב" lines={['…', '…']} /></UkPageLoader>   // last frame golden: a warm hero

#loader-frame

LoaderFrame

<Component />On load
<UkPageLoader exit="fade" minTime={4.5} slotTime={0.85}><LoaderFrame mark="/logo.svg" words={['עיצוב', 'קוד', 'תנועה']} /></UkPageLoader>
/* --uk-page-loader-frame-to: the page's first frame, the swell ends in it (Cobalto: its dusk sky) */

#loader-shader

exit="shader"

<Component />On load
<UkPageLoader exit="shader">…any slot…</UkPageLoader>   // an exit, not a look · no WebGL: a fade

#loader-own

Your own

כל דבר נכנס. כאן הכול CSS שקורא את --uk-page-loader-progress.

<UkPageLoader>
  <img src="..." className="w-60 [clip-path:inset(calc((1_-_var(--uk-page-loader-progress))*100%)_0_0_0)]" />
</UkPageLoader>

מים

תריסים

ערימה

שעון

#loader-live

בדמואים

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