רצועת לוגואים

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

רכיב · אמון · לקוחות · בלי ספריות

<!-- רצועת לוגואים — שכפלו את כל הפריטים פעמיים, אחרת הלולאה קופצת -->
<style>
  .klix-marquee { overflow: hidden; width: 100%;
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
  .klix-marquee ul { display: flex; width: max-content; gap: 3rem; margin: 0; padding: 0;
    list-style: none; animation: klix-marquee 24s linear infinite }
  .klix-marquee li { font-size: 1.1rem; font-weight: 700; color: #94a3b8; white-space: nowrap }
  .klix-marquee:hover ul { animation-play-state: paused }
  @keyframes klix-marquee { to { transform: translateX(-50%) } }
  html[data-motion="off"] .klix-marquee ul { animation: none }
</style>

<div class="klix-marquee">
  <ul>
    <li>מאפיית לחם</li><li>סטודיו נועה</li><li>מוסך הצפון</li><li>קליניקת שקד</li>
    <li aria-hidden="true">מאפיית לחם</li><li aria-hidden="true">סטודיו נועה</li>
    <li aria-hidden="true">מוסך הצפון</li><li aria-hidden="true">קליניקת שקד</li>
  </ul>
</div>