אנימציותProחדש
החלפת מסך פתיחה בגלילה
המסך הראשון נעוץ ומתכווץ בהטיה קלה בזמן הגלילה, והמקטע הבא גדל מעליו. מעבר חלק בין בלוקים.
התאמה
heroColor
gridColor
nextTint
heroTextColor
מבוסס על Sticky Hero Scroll (MIT רישיון) · תנאי שימוש
מאפיינים
14 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| hero | ReactNode | — | תוכן המסך הראשון שמתכווץ ונוטה. |
| next | ReactNode | — | תוכן המקטע הבא שגדל מעליו. |
| container | RefObject<HTMLElement | null> | — | אלמנט גלילה אם האפקט נמצא בתוכו. בלעדיו משמשת גלילת הדף. |
| height | string | "100vh" | גובה כל מקטע, כל אורך CSS. |
| scaleTo | number | 0.8 | לאיזה גודל המסך הראשון מתכווץ. |
| rotate | number | 5 | הטיה במעלות. |
| showGrid | boolean | true | רשת עדינה ברקע המקטעים. |
| heroClassName | string | — | מחלקות המסך הראשון. |
| nextClassName | string | — | מחלקות המקטע הבא. |
| heroColor | string | "#ebebeb" | רקע המסך הראשון. הוא מתכהה מעט כלפי מעלה. |
| gridColor | string | "rgba(79, 79, 79, 0.18)" | צבע קווי הרשת. |
| nextTint | string | "rgba(255, 255, 255, 0.06)" | זוהר בראש הקטע הבא, מעל רקע כמעט שחור. |
| heroTextColor | string | "#000000" | צבע הטקסט במסך הראשון. כהה, כדי שייקרא על הרקע הצבעוני. |
| className | string | — | מחלקות נוספות. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge