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

הרשימה משוכפלת פעמיים והתנועה היא בדיוק חצי, כך שכשהעותק הראשון יוצא, השני כבר במקומו והלולאה לא קופצת. העותק המשוכפל מסומן ב-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>