סמניםProחדש
שובל תמונות
שרשרת תמונות נגררת אחרי הסמן, מופיעה ונמוגה. נראה מצוין בתיקי עבודות ובגלריות.
התאמה
tileColor
tileAccentColor
tileHighlightColor
מבוסס על Image Trail (MIT רישיון) · תנאי שימוש
מאפיינים
12 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| threshold | number | 100 | כמה פיקסלים העכבר צריך לעבור עד שהתמונה הבאה מופיעה. |
| intensity | number | 0.3 | כמה חזק התמונה משיגה את הסמן. |
| repeatChildren | number | 3 | כמה פעמים סט התמונות חוזר בשובל. |
| zIndexDirection | 'new-on-top' | 'old-on-top' | "new-on-top" | האם תמונות חדשות נערמות מעל או מתחת. |
| baseZIndex | number | 0 | z-index בסיסי לכל התמונות. |
| keyframes | DOMKeyframesDefinition | — | האנימציה של כל תמונה, למשל הופעה והיעלמות. |
| keyframesOptions | AnimationOptions | — | משך ותזמון ל-keyframes. |
| as | ElementType | "div" | תגית ה-HTML של המכל. |
| children | ReactNode | — | רכיבי ImageTrailItem עם תמונות בפנים. |
| tileColor | string | "#ffffff" | הצבע הראשי של האריחים בשובל. האריחים קוראים אותו כ-var(--trail-c1). |
| tileAccentColor | string | "#9a9a9a" | צבע שני לאריחים, var(--trail-c2). |
| tileHighlightColor | string | "#d4d4d4" | צבע בהיר להדגשות באריחים, var(--trail-c3). |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge