הופעה בגלילה

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

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

<!-- הופעה בגלילה: הוסיפו את המחלקה klix-reveal לכל אלמנט -->
<script>
(function () {
  var Y = 48;        // מרחק העלייה בפיקסלים
  var STAGGER = 0.08; // השהיה נצברת בין אלמנטים סמוכים, בשניות

  var els = document.querySelectorAll('.klix-reveal');
  if (!els.length) return;

  // התוכן חייב להיות גלוי כשאין תנועה. מסתירים רק אם באמת אפשר להחזיר —
  // אחרת סקשן שלם נעלם מהדף בלי שאיש שם לב.
  if (!('IntersectionObserver' in window) ||
      window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  els.forEach(function (el, i) {
    var delay = (i % 4) * STAGGER;
    el.style.opacity = '0';
    el.style.transform = 'translateY(' + Y + 'px)';
    el.style.transition = 'opacity .9s cubic-bezier(.16,1,.3,1) ' + delay + 's,' +
                          'transform .9s cubic-bezier(.16,1,.3,1) ' + delay + 's';
  });

  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (!entry.isIntersecting) return;
      entry.target.style.opacity = '1';
      entry.target.style.transform = 'none';
      io.unobserve(entry.target);   // פעם אחת לכל אלמנט
    });
  }, { rootMargin: '0px 0px -15% 0px' });

  els.forEach(function (el) { io.observe(el); });
})();
</script>