כותרת שעולה מילה אחרי מילה

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

רכיב · כותרת · גלילה · טיפוגרפיה · בלי ספריות

<!-- כותרת שעולה מילה אחרי מילה: מחלקה klix-rise על כל כותרת.
     המשך בגוון מושתק: <span class="klix-rise-tail">...</span> בתוך הכותרת -->
<style>
.klix-rise .klix-w{display:inline-block;opacity:0;transform:translateY(16px);filter:blur(8px);
  transition:opacity .34s ease,transform .34s cubic-bezier(.16,1,.3,1),filter .34s ease;
  transition-delay:calc(var(--i) * 60ms)}
.klix-rise.is-in .klix-w{opacity:1;transform:none;filter:none}
.klix-rise-tail{color:#94a3b8;font-weight:400}
html[data-motion="off"] .klix-rise .klix-w{opacity:1;transform:none;filter:none;transition:none}
</style>

<script>
(function () {
  // עוטף כל מילה בטקסט, ומשאיר את הרווחים כמו שהם
  function split(node, counter) {
    Array.prototype.slice.call(node.childNodes).forEach(function (child) {
      if (child.nodeType === 3) {
        var parts = child.textContent.split(/(\s+)/);
        var frag = document.createDocumentFragment();
        parts.forEach(function (p) {
          if (!p) return;
          if (/^\s+$/.test(p)) { frag.appendChild(document.createTextNode(p)); return; }
          var w = document.createElement('span');
          w.className = 'klix-w';
          w.style.setProperty('--i', counter.n++);
          w.textContent = p;
          frag.appendChild(w);
        });
        child.parentNode.replaceChild(frag, child);
      } else if (child.nodeType === 1) {
        split(child, counter);
      }
    });
  }

  var io = 'IntersectionObserver' in window ? new IntersectionObserver(function (entries) {
    entries.forEach(function (e) {
      if (!e.isIntersecting) return;
      e.target.classList.add('is-in');
      io.unobserve(e.target);
    });
  }, { threshold: 0.3 }) : null;

  document.querySelectorAll('.klix-rise').forEach(function (h) {
    if (h.dataset.klixReady) return;
    h.dataset.klixReady = '1';
    // קורא מסך מקבל את המשפט השלם ולא מילים בודדות
    h.setAttribute('aria-label', h.textContent.replace(/\s+/g, ' ').trim());
    split(h, { n: 0 });
    if (io) io.observe(h); else h.classList.add('is-in');
  });
})();
</script>