<Component />While scrolling

לאיזה תוכןשירותים, תהליך, תיק עבודות / 3 עד 6 בלוקים גבוהים / תמונה חזקה ומלל קצר בכל בלוק

השאלהיש 3 עד 6 בלוקים גבוהים (שירותים, תהליך, פרויקטים) עם תמונה חזקה בכל אחד?

Vertical Flow

בלוקים גבוהים אחד אחרי השני (שירותים, תהליך): כל בלוק מתכווץ ל-0.9 ודוהה ל-0.5 כשהוא יוצא מלמעלה, והבא עולה בגודל מלא מאחוריו. שום דבר לא ננעל. האפקט הוא data-scale="exit" על כל בלוק, שעובד גם לבד; הקומפוננטה היא הבלוק שהוא צריך: המלל ב-5/12, תמונה רחבה ב-7/12 שקובעת את הגובה (--uk-vertical-flow-ratio, 3/2), והנקודות על הקצה התחתון של התמונה.

לא בגובה מסך: האפקט נמשך כמה שלוקח לבלוק לצאת, אז כל גובה עובד; בלוק גבוה יותר רק מתכווץ לאט יותר.href על פריט הופך את הכותרת שלו ללינק. דסקטופ בלבד: בטלפון הבלוקים נערמים, תמונה למעלה, ושום דבר לא זז.compact: גרסה קטנה לרשימה בתוך סקשן ולא סקשן בפני עצמו: מלל 7/12, תמונה 5/12, טיפוגרפיה וריווח בערך בחצי (בשימוש ב-/about, כלי ה-AI).

<UkVerticalFlow items={[
  { title: 'עיצוב UI/UX', body: '…', points: ['מחקר משתמשים', …], image: '/a.jpg', href: '/services/ux' },
  …
]} />

1 · split: מלל ליד תמונה

עיצוב UI/UX

ממשקים שנוח להשתמש בהם ושנראים טוב בכל מסך.

מחקר משתמשים
אפיון ומסכים
מערכת עיצוב
בדיקות שמישות

פיתוח אתרים

אתרים מהירים ויציבים, בקוד נקי שקל לתחזק.

אתרי תדמית
חנויות אונליין
חיבור למערכות
ביצועים ו-SEO

מיתוג

שם, לוגו ושפה חזותית שעובדים יחד בכל מקום.

לוגו ושפה
ספר מותג
חומרי דפוס
שילוט

שיווק דיגיטלי

קמפיינים שמביאים לקוחות, ומדידה שמראה מה עבד.

קמפיינים ממומנים
קידום אורגני
דוחות חודשיים
דפי נחיתה

2 · cover: תמונה מלאה, המלל עליה, וכניסת מלל

אותו data-scale="exit" על כרטיס תמונה מלא (16/9, --uk-vertical-flow-cover-ratio), והמלל יושב עליו, בתחתית, מעל גרדיאנט. ההבדל מהצורה הראשונה הוא שהמלל נכנס בזמן שהכרטיס עולה: התגיות והשורה עולות ומתבהרות עם הגלילה (data-movement="80" data-movement-type="from" data-movement-opacity="true", מהרגע שהראש נכנס עד שהכרטיס כולו על המסך), מילות הכותרת יוצאות מהמסכות שלהן פעם אחת בכניסה (split), וכותרת הסקשן מעל מתמלאת בגלילה (split="fill"). זה מה שהופך ארבע תמונות גדולות לסקשן ולא לגלריה. href הופך את כל הכרטיס ללינק; numbered מוסיף 01, 02. מתאים לפרויקטים, לתיק עבודות, לסניפים: תמונה חזקה לכל פריט ומעט מלל. אותה כניסת מלל עובדת גם על הצורה הראשונה עם entrance.

<h2 split="fill">הפרויקטים שלנו</h2>

<UkVerticalFlow variant="cover" numbered items={[
  { title: '…', kicker: 'אדריכלות', tags: ['עיצוב', 'גלריה'], body: '…', image: '/a.jpg', href: '/works/a' },
  …
]} />

/* the first shape with the same text entrance */
<UkVerticalFlow entrance numbered items={…} />