כרטיס מוטה

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

רכיב · ריחוף · בלי ספריות · כרטיסים

<!-- כרטיס מוטה: עטפו כל אלמנט במחלקה klix-tilt -->
<style>
  .klix-tilt{transform:perspective(900px);transition:transform .3s ease-out;will-change:transform}
</style>

<script>
(function () {
  var MAX = 9;   // זווית ההטיה המרבית במעלות

  // במכשירי מגע אין ריחוף, ו-pointerleave לא נורה באופן אמין —
  // הכרטיס היה נשאר תקוע מוטה אחרי נגיעה אחת. לכן פשוט לא מפעילים.
  if (!window.matchMedia('(hover: hover)').matches) return;

  function move(e) {
    var el = e.currentTarget;
    var r = el.getBoundingClientRect();
    var x = (e.clientX - r.left) / r.width - 0.5;
    var y = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = 'perspective(900px) rotateY(' + (x * MAX) + 'deg) rotateX(' +
                         (-y * MAX) + 'deg) translateY(-4px)';
  }

  function reset(e) { e.currentTarget.style.transform = 'perspective(900px)'; }

  document.querySelectorAll('.klix-tilt').forEach(function (el) {
    el.addEventListener('pointermove', move);
    el.addEventListener('pointerleave', reset);
  });
})();
</script>