אנימציותProחדש
גלריית גלילה אופקית
המקטע ננעץ במסך וגלילה רגילה מזיזה שורת כרטיסים הצידה. הכרטיס שבמסגרת נדלק ופס התקדמות מתמלא למטה.
התאמה
color
accentColor
highlightColor
trackColor
מבוסס על Framer Horizontal Scroll (MIT רישיון) · תנאי שימוש
מאפיינים
12 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| children | ReactNode | — | שקופיות בשורה אחת. |
| container | RefObject<HTMLElement | null> | — | אלמנט גלילה אם האפקט נמצא בתוכו. בלעדיו משמשת גלילת הדף. |
| height | string | "100vh" | גובה האזור הנעוץ, כל אורך CSS. |
| length | number | 3 | כמה גבהי מסך של גלילה לוקחת כל הנסיעה. |
| gap | number | 24 | רווח בין שקופיות בפיקסלים. |
| showProgress | boolean | true | פס התקדמות דק למטה. |
| focusEffect | boolean | true | שקופיות שלא בתוך המסגרת דוהות, מאפירות ומתכווצות מעט. |
| color | string | "#ffffff" | הצבע הראשי: פס ההתקדמות. השקופיות קוראות אותו דרך var(--gallery-c1). |
| accentColor | string | "#737373" | הצבע השני. השקופיות קוראות אותו דרך var(--gallery-c2). |
| highlightColor | string | "#e5e5e5" | צבע הדגשה בהיר. השקופיות קוראות אותו דרך var(--gallery-c3). |
| trackColor | string | "rgba(255, 255, 255, 0.1)" | צבע המסלול הריק מתחת לפס ההתקדמות. |
| className | string | — | מחלקות נוספות. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge