מתג אפקטים

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

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

<!-- מתג אפקטים — להדביק לפני </body> -->
<div id="klix-motion">
  <button id="klix-motion-hint" type="button" hidden>
    המחשב שלכם מוגדר לתנועה מופחתת, ולכן האפקטים כבויים.
    <b>להדליק אותם?</b>
  </button>
  <button id="klix-motion-btn" type="button" aria-pressed="true" aria-label="כיבוי אפקטים ותנועה">✦</button>
</div>

<style>
  #klix-motion{position:fixed;bottom:1.5rem;inset-inline-end:1.5rem;z-index:50;
    display:flex;align-items:center;gap:.75rem;direction:rtl}
  #klix-motion-hint{max-width:15rem;border:0;border-radius:1rem;cursor:pointer;
    background:rgba(15,23,42,.85);backdrop-filter:blur(8px);color:rgba(255,255,255,.8);
    padding:.65rem 1rem;font:inherit;font-size:.75rem;line-height:1.5;text-align:start}
  #klix-motion-hint b{display:block;margin-top:.15rem;color:#fcd34d}
  #klix-motion-btn{width:3rem;height:3rem;border-radius:999px;cursor:pointer;font-size:1.1rem;
    display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s;
    border:1px solid rgba(245,158,11,.6);background:rgba(245,158,11,.15);color:#fcd34d}
  #klix-motion-btn[aria-pressed="false"]{border-color:rgba(255,255,255,.2);
    background:rgba(15,23,42,.8);color:rgba(255,255,255,.6)}

  /* כל אנימציה בדף נתלית בתכונה הזו ולא ב-media query. אם ה-CSS נתלה
     ישירות בהעדפת מערכת ההפעלה, ההגדרה מנצחת את המתג והמבקר לוחץ
     "הדלק" בלי שכלום קורה. */
  html[data-motion="off"] *,
  html[data-motion="off"] *::before,
  html[data-motion="off"] *::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
</style>

<script>
(function () {
  var KEY = 'motion';
  var root = document.documentElement;
  var btn = document.getElementById('klix-motion-btn');
  var hint = document.getElementById('klix-motion-hint');
  if (!btn) return;

  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var stored = null;
  try { stored = localStorage.getItem(KEY); } catch (e) { /* גלישה פרטית */ }

  // ברירת המחדל מכבדת את מערכת ההפעלה. בחירה מפורשת של המשתמש גוברת עליה.
  var on = stored !== null ? stored === '1' : !reduced;

  function apply() {
    root.dataset.motion = on ? 'on' : 'off';
    btn.setAttribute('aria-pressed', String(on));
    btn.setAttribute('aria-label', on ? 'כיבוי אפקטים ותנועה' : 'הדלקת אפקטים ותנועה');
    btn.textContent = on ? '✦' : '❚❚';
  }

  function toggle() {
    on = !on;
    apply();
    if (hint) hint.hidden = true;
    try { localStorage.setItem(KEY, on ? '1' : '0'); } catch (e) {}
  }

  apply();
  // דף שכל האפקטים בו כבויים נראה שבור. כשהכיבוי הגיע ממערכת ההפעלה
  // ולא מהמשתמש, מציעים לו במפורש להדליק.
  if (hint && stored === null && reduced) hint.hidden = false;

  btn.addEventListener('click', toggle);
  if (hint) hint.addEventListener('click', toggle);
})();
</script>