JavaScript - DOM Animations

JavaScript - DOM Animations (التحريك باستخدام JavaScript)

🔸 يمكنك استخدام JavaScript لتحريك عناصر HTML عن طريق تغيير خصائص CSS تدريجيًا داخل دالة متكررة مثل setInterval() أو requestAnimationFrame().

---

🔹 مثال على تحريك عنصر أفقيًا

function moveRight() {
  const elem = document.getElementById("box");
  let pos = 0;

  const id = setInterval(frame, 10);

  function frame() {
    if (pos >= 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.left = pos + "px";
    }
  }
}

📌 يجب أن يكون العنصر الذي تتحكم فيه له خاصية position: absolute أو relative في CSS.

---

🔹 استخدام requestAnimationFrame()

let pos = 0;
function animate() {
  const elem = document.getElementById("box");
  pos++;
  elem.style.left = pos + "px";

  if (pos < 350) {
    requestAnimationFrame(animate);
  }
}

animate();

📌 هذه الطريقة أكثر سلاسة وكفاءة، حيث تتزامن مع معدل تحديث الشاشة.

---

🔹 إيقاف الحركة

clearInterval(myInterval);
cancelAnimationFrame(myRequest);

📌 استخدم هذه الأوامر لإيقاف التحريك في الوقت المناسب.

---

⚠️ ملاحظات مهمة

• التحريك اليدوي باستخدام JavaScript جيد للحالات البسيطة أو الديناميكية.
• لتحريك العناصر بشكل أكثر تقدمًا، يُفضل استخدام CSS Animations أو مكتبات مثل GSAP.
• تأكد من ضبط position بشكل صحيح في CSS لتأثير الحركة أن يظهر.