إصلاح الرسوم المتحركة لجافا سكريبت المعتمدة على الوسائط لمواقع الويب سريعة الاستجابة

التعامل مع الرسوم المتحركة الشرطية بناءً على استعلامات الوسائط باستخدام JavaScript

يتعامل هذا الحل مع الرسوم المتحركة الشرطية التي تعتمد على عرض الشاشة من خلال استخدام JavaScript جنبًا إلى جنب مع window.matchMedia وظيفة.

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollFunction(); };

function scrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQueryNav.matches) {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  if (mediaQueryCta.matches) {
    // CTA scroll for mobile screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  }
  prevScrollpos = currentScrollPos;
}

النهج المعياري باستخدام مستمعي الأحداث المنفصلين لأحجام الشاشات المختلفة

يعد هذا الإصدار أكثر كفاءة ومعياريًا لأنه يستخدم مستمعي أحداث تمرير مختلفين لكل استعلام وسائط.

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

mediaQueryNav.addEventListener("change", handleNavScroll);
mediaQueryCta.addEventListener("change", handleCtaScroll);

function handleNavScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", navScrollFunction);
  } else {
    window.removeEventListener("scroll", navScrollFunction);
  }
}

function handleCtaScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", ctaScrollFunction);
  } else {
    window.removeEventListener("scroll", ctaScrollFunction);
  }
}

function navScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navigation").style.top = "0";
  } else {
    document.getElementById("navigation").style.top = "-90px";
  }
  prevScrollpos = currentScrollPos;
}

function ctaScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header-button").style.left = "0.25in";
  } else {
    document.getElementById("header-button").style.left = "-10in";
  }
  prevScrollpos = currentScrollPos;
}

// Initial call to apply the correct event listeners
handleNavScroll(mediaQueryNav);
handleCtaScroll(mediaQueryCta);

تطبيق المنطق الشرطي على معالج التمرير الموحد لاستعلامات الوسائط

تستخدم هذه الطريقة مستمعًا واحدًا لحدث التمرير مع اختبارات شرطية اعتمادًا على استعلامات الوسائط للتعامل مع كلا الرسوم المتحركة.

var prevScrollpos = window.pageYOffset;
var mediaQuery = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollHandler(); };

function scrollHandler() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQuery.matches) {
    // CTA scroll for mobile
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  } else {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  prevScrollpos = currentScrollPos;
}

الأسئلة المتداولة حول الرسوم المتحركة لجافا سكريبت واستعلامات الوسائط

1. كيف يمكنني استخدام استعلامات الوسائط في JavaScript؟
2. يتيح لك JavaScript تطبيق استعلامات الوسائط باستخدام window.matchMedia(). يمكنك استخدام هذه الطريقة لتشغيل برامج نصية مختلفة بناءً على عرض الشاشة.
3. كيف يمكنني التحكم في الرسوم المتحركة بناءً على حجم الشاشة؟
4. يستخدم window.matchMedia() لتحديد عرض الشاشة للتحكم في الرسوم المتحركة. ثم قم بإضافة أو إزالة مستمعي الأحداث حسب الضرورة. وهذا يضمن أنه، اعتمادًا على حجم الشاشة، سيتم تشغيل الرسوم المتحركة ذات الصلة فقط.
5. ما هي أفضل طريقة لتحسين الرسوم المتحركة التمرير؟
6. من خلال تقليل عدد العمليات التي يتم إجراؤها داخل حدث التمرير، window.onscroll يمكن استخدامها بشكل أكثر فعالية في تحسين الرسوم المتحركة التمريرية. عند اكتشاف التمرير، عندها فقط يتم تنفيذ منطق الرسوم المتحركة المطلوب.
7. كيف يمكنني التعامل مع الرسوم المتحركة المتعددة في JavaScript؟
8. يمكن إدارة الرسوم المتحركة المتعددة عن طريق تقسيمها إلى ظروف مختلفة ومستمعي الأحداث. وهذا يقلل من احتمالية حدوث تعارضات لأن كل رسم متحرك يعمل بشكل منفصل.
9. ماذا يفعل prevScrollpos و currentScrollPos تفعل في الرسوم المتحركة التمرير؟
10. تراقب هذه المتغيرات المكان الذي يقوم فيه المستخدم بالتمرير. يتم تخزين موضع التمرير السابق فيه prevScrollpos، ويتم تخزين موضع التمرير الحالي فيه currentScrollPos. من الممكن معرفة ما إذا كان المستخدم يقوم بالتمرير لأعلى أو لأسفل من خلال مقارنتهما.

الأفكار النهائية حول الرسوم المتحركة المستندة إلى استعلام الوسائط

في الختام، يتطلب إنشاء موقع ويب سريع الاستجابة إدارة الرسوم المتحركة لجافا سكريبت لمختلف الأجهزة. يمكن للمطورين توفير تجربة مستخدم مثالية عن طريق تشغيل رسوم متحركة محددة بناءً على عرض الشاشة من خلال استخدام أدوات مثل window.matchMedia().

عند تنفيذها بشكل صحيح، يمكن لمواقع الويب تحسين سلوكها المرئي وأدائها على الأجهزة المختلفة. إحدى الطرق للقيام بذلك هي تطبيق الرسوم المتحركة التمريرية بشكل انتقائي وعزلها. تضمن هذه الطريقة انتقالات سلسة بين الرسوم المتحركة لسطح المكتب والجوال وتساعد على منع تعارض البرامج النصية.