10 עיצובי Hero Section מודרניים (דוגמאות חיות + קוד)

ה-Hero Section (או בשמו העברי ״אזור הפתיחה״) הוא הבלוק הראשון שהגולש רואה כשהעמוד נטען. הוא מכיל כותרת, שורה תומכת, קריאה לפעולה ולרוב גם ויז'ואל, ויש לו שניות ספורות להסביר מה מציע העמוד ומה כדאי לעשות הלאה.

בראש פוסט זה תמצאו עשרה Hero Sections מודרניים כדוגמאות חיות. כל אחד מהם מציג גישה עיצובית אחרת ואת ה-CSS שמאחוריה, החל מ-Container Queries ועד אנימציות מבוססות גלילה. הם מתחלפים אוטומטית כל עוד הם מופיעים על המסך (העבירו את העכבר מעליהם בכדי לעצור), או בחרו אחד מהם בסרגל התחתון. בהמשך אסביר כיצד בנוי כל אחד מהם.

מהו Hero Section?

ה-Hero Section הוא האזור העליון של העמוד, החלק שרואים עוד לפני שגוללים. ברוב האתרים זה הבלוק הנצפה ביותר בעמוד, ולא פעם הוא זה שמכריע אם הגולש יישאר.

Hero טוב בנוי מאותם כמה רכיבים, לא משנה איך הוא נראה:

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

עשרת ה-Heroes שבהמשך משתמשים ברכיבים האלו בדרכים שונות מאוד. המותגים בדויים, כך שלכל גישה יש מראה משלה.

מה הופך Hero Section למודרני

מודרני לא אומר יותר אנימציה. ה-Heroes שמחזיקים מעמד ב-2026 חולקים כמה תכונות:

• מסר אחד. כותרת אחת, פעולה ראשית אחת, בלי סליידר של חמש הצעות שמתחרות זו בזו.
• הצגה ראשונה מהירה. ה-Hero מכיל בדרך כלל את אלמנט ה-LCP (בשמו המלא Largest Contentful Paint), ולכן טקסט או תמונה קלה עדיפים על וידאו כבד.
• Layout שמגיב לקונטיינר. בעזרת Container Queries אותו Hero עובד במסך מלא, בתוך עמודה או בחלון תצוגה מקדימה.
• תנועה עם מתג כיבוי. כל אנימציה נעצרת כשהגולש מבקש תנועה מופחתת (Reduced Motion).

הנה השוואה בין העשרה:

כל הדוגמאות נשענות על אותו בסיס: ה-Hero הוא קונטיינר מבוסס גודל, ולכן נקודות השבירה שלו נקבעות לפי הרוחב שלו ולא לפי רוחב המסך. זו הסיבה שהכפתורים Desktop, Tablet ו-Phone בכל דוגמה משנים את ה-layout בזמן שהמסך שלכם נשאר אותו דבר.

.hero {
  container: hero / inline-size;
}

@container hero (max-width: 760px) {
  .hero-bottom { grid-template-columns: 1fr; }
}

אם Container Queries חדשים לכם, המדריך המלא ל-Container Queries מסביר את התחביר ואת היחידות בפירוט.

1. Hero עם עדשת רנטגן (X-ray Lens)

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

החור הוא radial gradient המשמש כ-mask, כשהמרכז והרדיוס שלו מוגדרים במשתני CSS:

.render {
  mask-image: radial-gradient(
    circle var(--r) at var(--x) var(--y),
    transparent 98%, #000 100%
  );
}

ה-JavaScript רק מזיז את --x ואת --y בהדרגה לכיוון העכבר, בכדי ליצור מעקב רך. שכבת השרטוט מסומנת aria-hidden, מכיוון שהיא חוזרת על אותו תוכן.

כל שכבה מציירת את הבית כ-SVG מוטמע (inline) עם אותו viewBox ואותן קואורדינטות, כך שכל קו בשרטוט יושב בדיוק מתחת לתמונה. בשכבת השרטוט, vector-effect: non-scaling-stroke שומר על קווים בעובי פיקסל אחד בכל גודל.

SVG מוטמע אינו מועמד ל-LCP. בבדיקה שלי בעמוד זה הכותרת נשארה אלמנט ה-LCP, למרות שהשרטוט תופס יותר מהמסך.

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

זה מה שהופך Hero כזה לשווה את המאמץ. העדשה מראה משהו שהתמונה המוגמרת לא מראה, ולכן באמת משתלם להזיז את העכבר.

הרעיון מתאים לכל עסק עם סיפור ״מאחורי הקלעים״: אדריכלים, מהנדסים, מערכות עיצוב (Design Systems) או כלי פיתוח שמראה את הקוד שמתחת לממשק.

2. Hero עם טיפוגרפיית חלקיקים (Particle Type)

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

הטריק הוא לצייר את המילה פעם אחת על Canvas מוסתר, ואז לשמור כל כמה פיקסלים שאינם שקופים. כל פיקסל שנשמר הופך לחלקיק עם ״מיקום בית״:

off.font = `900 ${size}px "Noto Sans Hebrew"`;
off.fillText('DRIFT', x, y);
const { data } = off.getImageData(0, 0, w, h);

for (let y = 0; y < h; y += step) {
  for (let x = 0; x < w; x += step) {
    if (data[(y * w + x) * 4 + 3] > 140) {
      particles.push({ hx: x, hy: y, x, y, vx: 0, vy: 0 });
    }
  }
}

בכל פריים, כל חלקיק נמשך חזרה אל מיקום הבית שלו ונדחף הרחק מהעכבר:

for (const p of particles) {
  p.vx = (p.vx + (p.hx - p.x) * 0.05) * 0.85;
  p.vy = (p.vy + (p.hy - p.y) * 0.05) * 0.85;
  const dx = p.x - px, dy = p.y - py, d = Math.hypot(dx, dy);
  if (d < radius) {
    p.vx += (dx / d) * (1 - d / radius) * 4;
    p.vy += (dy / d) * (1 - d / radius) * 4;
  }
  p.x += p.vx;
  p.y += p.vy;
}

שלושה כללים שומרים על זה קליל. הלולאה נעצרת ברגע שכל החלקיקים נרגעים, היא רצה רק כשה-Hero על המסך, וחלקיקים באותו צבע מצוירים יחד, כך שה-Canvas מחליף צבע מילוי שש פעמים בכל פריים ולא שלושת אלפים.

Canvas אינו טקסט, ולכן הכותרת האמיתית יושבת לידו כאלמנט מוסתר ויזואלית, והשורה שמתחת למילה היא HTML רגיל. את אותה שורה מקבלים מנועי החיפוש וקוראי המסך, והיא גם זו שהדפדפן יכול לדווח עליה כ-Largest Contentful Paint.

3. Hero עם Bento Grid חי

Hero בסגנון Bento מחלק את המסך הראשון לאריחים בגדלים שונים, כמו קופסת אוכל יפנית. הוא עובד כשיש למוצר כמה יתרונות ואין כותרת אחת שיכולה לשאת את כולם. Bento סטטי נראה כמו ברושור, ולכן כאן הכל זז: מונה מבקרים בזמן אמת, פיד של אירועים חדשים, מספרים שעולים ו-borders שנדלקים מתחת לעכבר.

ה-layout הוא Grid עם אזורים בעלי שם. אריח הכותרת פרוש על פני שתי עמודות ושתי שורות, כך שהגודל לבדו אומר לעין מאיפה להתחיל. שני Container Queries מסדרים אותו מחדש בשתי עמודות, ואז בעמודה אחת:

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "head head stat feed"
    "head head chart feed"
    "logos logos logos logos";
}
@container hero (max-width: 820px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "head head" "stat chart" "feed feed" "logos logos";
  }
}

ה-border הזוהר עוקב אחרי העכבר. לכל אריח יש פסאודו-אלמנט עם radial gradient במיקום העכבר, ו-mask שחושף רק את השוליים ברוחב פיקסל אחד:

.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx) var(--my), #1d6b43, transparent 70%);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

כללים ששומרים על Bento מלהפוך לערימת כרטיסים:

• אריח דומיננטי אחד. אריח הכותרת הוא הגדול ביותר והיחיד שכהה.
• נתונים אמיתיים באריחים. מספר, גרף או פיד חי מצדיקים את המקום שלהם. אריח עם אייקון וכותרת בלבד לא.
• ספרות טבלאיות למספרים. font-variant-numeric: tabular-nums מונע ממונה מתעדכן לקפוץ, בלי לעבור לגופן מונוספייס.
• פחות אריחים בנייד. הדוגמה מוותרת על המשפך ועל רצועת הלוגואים במסכים צרים, במקום לערום שישה כרטיסים זה על זה.

4. Hero עם ממשק מוצר שמדגים את עצמו

Hero של מוצר מציג את הממשק עצמו, וה-Hero הזה גם מפעיל אותו: סמן ״רפאים״ מתאים בין שתי חשבוניות, המונים מתעדכנים, הודעת toast מאשרת כל התאמה והחודש נסגר. הגולש רואה את המוצר עובד עוד לפני שנרשם.

הממשק הוא HTML ו-CSS רגילים ולא וידאו או צילום מסך, כך שהוא נשאר חד בכל גודל ושוקל כמה קילובייטים בודדים. הפאנלים ממוקמים במרחב תלת ממדי: האלמנט ההורה מגדיר perspective, הערימה משתמשת ב-transform-style: preserve-3d, וכל כרטיס צף מקבל עומק משלו עם translateZ().

הסיור הוא סקריפט async קצר. הסמן זז ע"י שינוי של שני משתני CSS, וה-CSS מטפל בהאטה (easing):

async function tour() {
  while (true) {
    await untilVisible();
    await click(rowA.querySelector('.match'));  // cursor glides there, presses
    setStatus(rowA, 'Matched');
    count('matched', +1);
    toast('Invoice #4472 matched');
    await sleep(1000);
    await click(closeButton);
    showBanner('March closed, 3 days early');
    await sleep(5000);                         // hold, reset, loop
  }
}

סיור כזה דורש את אותה תשומת לב כמו וידאו. הוא נעצר כשה-Hero יוצא מהמסך, הוא אף פעם לא מזיז את העכבר האמיתי ולא גונב פוקוס, ותחת תנועה מופחתת הוא נשאר במצבו הראשון. סמנו את הממשק המדומה ב-aria-hidden="true", מכיוון שהמספרים שבו הם קישוט.

גופן מונוספייס שייך רק לנתונים שבתוך הממשק: סכומים, ספירות, תזרים. הכותרת והכפתורים נשארים בסאנס.

5. Hero עם טיפוגרפיה קינטית (Kinetic Type)

את ה-Hero הזה כמעט לא רואים באתרים. כל אות בכותרת נעשית כבדה וצרה יותר ככל שהעכבר מתקרב אליה, כאילו הטיפוגרפיה מגיבה אליכם. במסכי מגע, גל איטי עובר דרך האותיות במקום זאת.

זה עובד מכיוון שלגופן משתנה (Variable Font) יש צירים רציפים. הגופן כאן נע בין משקל 300 ל-900 וברוחב שבין 62.5 ל-100, כך שכל אות יכולה לשבת בכל נקודה ביניהם. ה-JavaScript מפרק את הכותרת לתגיות span לכל אות ומגדיר על כל אחת שני משתנים:

.ch {
  display: inline-block;
  font-variation-settings: "wght" var(--w, 300), "wdth" var(--s, 100);
}

לולאת פריימים מודדת את המרחק בין כל אות לעכבר ומקרבת את הערכים בהדרגה ליעד. היא רצה רק כשה-Hero על המסך, דבר שנבדק בעזרת IntersectionObserver.

אין כאן שילוב גופנים, וזה בכוונה: משפחה משתנה אחת היא כל ההצגה. שני פרטים הופכים את זה לבטוח לשימוש:

• קוראי המסך מקבלים משפט ולא אותיות. תגיות האותיות מסומנות aria-hidden, ועותק מוסתר ויזואלית מחזיק את הכותרת המלאה.
• שמרו על כותרת קצרה. כל שינוי רוחב מסדר מחדש את השורה, ולכן זה עובד לכ-25 אותיות ולא לפסקה.

6. Hero עם קונפיגורטור ו-View Transitions

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

כל צבע מוגדר כסט של Custom Properties על ה-Hero, כך שהחלפת צבע היא שינוי של אטריביוט אחד:

.hero[data-c="ink"]  { --bg: #121418; --ink: #f1efea; --body: #3a3e46; }
.hero[data-c="sand"] { --bg: #ece5d9; --ink: #231f19; --body: #cdbb9e; }
.headphones .cup     { fill: var(--body); }

החשיפה מגיעה מה-View Transitions API. הדפדפן מצלם את ה-Hero לפני השינוי ואחריו, ואתם מנפישים את הצילום החדש עם עיגול שגדל:

hero.style.viewTransitionName = 'hero';
const vt = document.startViewTransition(() => { hero.dataset.c = colour; });

vt.ready.then(() => {
  document.documentElement.animate(
    { clipPath: [`circle(0 at ${x}px ${y}px)`, `circle(${r}px at ${x}px ${y}px)`] },
    { duration: 750, easing: 'cubic-bezier(.65, 0, .35, 1)',
      pseudoElement: '::view-transition-new(hero)' }
  );
});

View Transitions בתוך אותו מסמך עובדים בכרום 111 ומעלה, בספארי 18 ומעלה ובפיירפוקס 144 ומעלה. היכן שאין תמיכה, או תחת תנועה מופחתת, הצבע פשוט מתחלף. דוגמיות הצבע הן קבוצת radio אמיתית, כך שמקשי החיצים עוברים בין הצבעים וקורא מסך מכריז על הצבע שנבחר.

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

7. Hero בסגנון לוח המראות (Split-Flap)

ה-Hero הזה הופך את הכותרת ללוח יציאות של תחנת רכבת. כל אות מתהפכת דרך האלפבית עד שהיא נוחתת, והשורה האחרונה ממשיכה להחליף יעד: ברלין, וינה, פראג, פריז.

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

.cell .top-flap {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  animation: fold-down 38ms ease-in forwards;
}
.cell .bottom-flap {
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  animation: fold-up 38ms ease-out 38ms forwards;
}
@keyframes fold-down { to { transform: rotateX(-90deg); } }
@keyframes fold-up   { to { transform: rotateX(0); } }

ה-JavaScript מעביר כל תא דרך סט התווים עד ליעד שלו, ומתחיל כל עמודה 45 מילישניות אחרי זו שלפניה, וזה מה שנותן ללוח את אפקט הגל. הלוח מסומן aria-hidden, ומשפט מוסתר ויזואלית נושא את המסר, כך שקורא מסך לא מקריא ארבעים אותיות שמתחלפות.

קבעו את גודל התאים ב-cqi כך שהלוח כולו ייכנס ב-Hero בכל רוחב. חמש עשרה עמודות של 7.4cqi נכנסות בטלפון ברוחב 390px עם מקום פנוי.

8. Hero קולנועי מבוסס גלילה (Scroll-Driven)

ה-Hero הקולנועי מתחיל ככותרת מעל תמונה ממוסגרת. בזמן הגלילה התמונה נפתחת לרוחב מלא, ומפרט המוצר מופיע בסוף.

כל האפקט הוא CSS. כך MDN מתארים את הפיצ'ר:

"The CSS scroll-driven animations module provides functionality that builds on the CSS animations module and Web Animations API. It allows you to animate property values along a scroll-based timeline rather than the default time-based document timeline." (MDN, CSS scroll-driven animations)

ה-Hero גבוה מהמסך והשכבה הפנימית שלו היא position: sticky, כך שהיא נשארת נעוצה בזמן שגוללים דרכו. View Timeline עם שם שמוגדר על ה-Hero מניע את האנימציות:

.hero {
  height: 220svh;
  view-timeline: --cine block;
  view-timeline-inset: var(--header-height) 0px;
}
.hero-pin { position: sticky; top: var(--header-height); height: 100svh; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-media {
      animation: open linear both;
      animation-timeline: --cine;
      animation-range: contain 0% contain 60%;
    }
  }
}
@keyframes open {
  from { clip-path: inset(56% 14% 7% 14% round 14px); }
  to   { clip-path: inset(0 0 0 0 round 0); }
}

view-timeline-inset מפחית את גובה ההדר הקבוע של האתר, כך שהאנימציה מתחילה בראש העמוד ולא 87px מאוחר יותר. בלי תמיכה, או עם תנועה מופחתת, ה-Hero חוזר ל-layout רגיל בגובה מסך אחד שבו הכל גלוי.

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

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

לגבי הגבהים, svh מונע מהשכבה הנעוצה לקפוץ כשסרגל הכלים של דפדפן הנייד מופיע ונעלם. המדריך ל-dvh, svh ו-lvh מסביר את ההבדל.

9. Hero טיפוגרפי בסגנון מגזיני (Editorial)

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

גודל הכותרת נגזר מרוחב הקונטיינר, בעזרת היחידה cqi (אחוז אחד מהרוחב הפנימי של הקונטיינר). מגבלה שנייה, לפי גובה המסך, מונעת מהכותרת לגלוש במסך נמוך של מחשב נייד:

.hero-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.9rem, min(10.4cqi, var(--stage-height) * .135), 12rem);
  line-height: .9;
  text-wrap: balance;
  max-width: 16ch;
}

text-wrap: balance מאזן את אורכי השורות כך שהשורה האחרונה לא תהיה מילה יתומה אחת. המדריך ל-text-wrap מסביר מתי להשתמש ב-balance ומתי pretty היא הבחירה הטובה יותר.

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

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

שימו לב גם למשקל הגופן ברשת. גופן התצוגה הוא כל העיצוב כאן, אז הסתפקו בקובץ אחד. הסריף בדוגמה זו הוא subset לטיני של 15KB עם font-display: swap.

10. Hero מבוסס Prompt

ב-Hero מבוסס Prompt, תיבת הקלט היא הקריאה לפעולה. הוא הפך לברירת המחדל של כלי AI, מכיוון שהדרך המהירה ביותר להציג את המוצר היא לתת לגולש להשתמש בו כבר במסך הראשון.

ה-border הזוהר הוא conic gradient שהזווית שלו מונפשת. Gradients לא יכולים להיות מונפשים בעצמם, אבל Custom Property שנרשם עם @property כן:

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.prompt {
  border: 1px solid transparent;
  background:
    linear-gradient(#171620, #171620) padding-box,
    conic-gradient(from var(--angle), #8a5af4, #dd56b8, #4e82e5, #8a5af4) border-box;
  animation: spin 7s linear infinite;
}
@keyframes spin { to { --angle: 360deg; } }

המדריך ל-@property ב-CSS מציג אפקטים נוספים שבנויים באותה צורה.

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

שמרו על תיבה שנוח להשתמש בה:

• תנו לה label אמיתי. Placeholder אינו label. הדוגמה משתמשת בתגית <label> מוסתרת ויזואלית.
• אל תפעילו autofocus. בטלפון זה פותח את המקלדת מעל ה-Hero שלכם.
• עצרו placeholders מתחלפים כשהשדה בפוקוס או מכיל טקסט, ועצרו אותם לגמרי תחת תנועה מופחתת.

כיצד עשרת ה-Heroes מתחברים: צבע וטיפוגרפיה

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

• בהיר וכהה מתחלפים לפי סדר הסרגל, כך שכל מעבר הוא החלפת סצנה ברורה.
• לצבעי ההדגשה יש בהירות משותפת. ב-Heroes הכהים כל צבע הדגשה יושב בערך באותה בהירות OKLCH כמו הזהב של האתר, כך שאף אחד מהם לא מאפיל על השאר.
• אף צבע הדגשה לא קרוב לזהב של הסרגל, כך שהפקדים לעולם לא נבלעים בתוך הדוגמה.
• הצבעים הניטרליים צבועים לכיוון הגוון של כל Hero, ולא אפור פשוט.
• לכל Hero יש הדגשה משלו. מילה באיטליק, מרקר, שינוי משקל או העדשה, ולא אותה מילה צבועה עשר פעמים.

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

כל צבעי הטקסט בדוגמאות עומדים בדרישות יחס הניגודיות של WCAG, כלומר 4.5:1, או 3:1 לטקסט תצוגה גדול.

צ'קליסט ביצועים ונגישות ל-Hero Section

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

• הכירו את אלמנט ה-LCP שלכם. ברוב ה-Heroes זו הכותרת או התמונה הראשית. לעולם אל תתחילו אותו ב-opacity: 0 בשביל אנימציית כניסה, מכיוון שאלמנט שקוף לא נספר כמוצג עד שהוא מופיע.
• התאימו את גודל התמונות למסך. הגישו קובץ קטן יותר לטלפונים, והימנעו מווידאו כוויז'ואל היחיד.
• השתמשו ב-svh ל-Heroes בגובה מלא ולא ב-100vh, שגבוה מהאזור הגלוי בנייד.
• כבדו תנועה מופחתת. עטפו תנועה ב-prefers-reduced-motion: no-preference ועצבו מצב סטטי טוב.
• בדקו ניגודיות בכל שכבה. גם טקסט מעל gradients ותמונות צריך 4.5:1.
• השתמשו בכפתורים וב-labels אמיתיים. קריאה לפעולה שהיא div מעוצב אינה נגישה מהמקלדת.

שאלות נפוצות

שאלות נפוצות בנושא Hero Sections:

סיכום

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

בחרו את הגישה שמתאימה לסיפור שלכם, בנו אותה כקונטיינר כך שתעבוד בכל רוחב, שלבו לכל היותר שני גופנים עם תפקידים ברורים, ותנו לכל תנועה חלופה סטטית ורגועה. אני מקווה שהדוגמאות יתנו לכם השראה ל-Hero הבא שלכם.