הופעה בגלילה

האפקט שמופיע כמעט בכל אתר תדמית. כאן בלי 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>