Médiafüggő JavaScript-animációk javítása reszponzív webhelyekhez

Médialekérdezéseken alapuló feltételes animációk kezelése JavaScript segítségével

Ez a megoldás a képernyő szélességétől függő feltételes animációkat kezeli a JavaScript használatával együtt window.matchMedia funkció.

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;
}

Moduláris megközelítés külön eseményfigyelők használatával a különböző képernyőméretekhez

Ez a verzió hatékonyabb és modulárisabb, mivel minden médialekérdezéshez különböző görgetési eseményfigyelőket használ.

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);

Feltételes logika alkalmazása a médialekérdezések egységes görgetési kezelőjére

Ez a módszer egyetlen görgetéses eseményfigyelőt használ, feltételes ellenőrzésekkel a médialekérdezésektől függően mindkét animáció kezeléséhez.

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;
}

Gyakran Ismételt Kérdések a JavaScript-animációkról és a médialekérdezésekről

1. Hogyan használhatok médialekérdezéseket JavaScriptben?
2. A JavaScript lehetővé teszi a médialekérdezések alkalmazását window.matchMedia(). Ezzel a módszerrel a képernyő szélességétől függően különböző szkripteket futtathat.
3. Hogyan szabályozhatom az animációkat a képernyő mérete alapján?
4. Használat window.matchMedia() a képernyő szélességének meghatározásához az animációk vezérléséhez. Ezután adjon hozzá vagy távolítson el eseményfigyelőket, ha szükséges. Ez garantálja, hogy a képernyő méretétől függően csak a megfelelő animáció kerül lejátszásra.
5. Mi a legjobb módja a görgetős animációk optimalizálásának?
6. A görgetési eseményen belül végrehajtott műveletek számának csökkentésével, window.onscroll hatékonyabban használható a görgetős animáció optimalizálásában. Amikor a rendszer görgetést észlel, csak akkor fut le a szükséges animációs logika.
7. Hogyan kezelhetek több animációt JavaScriptben?
8. Több animáció kezelhető úgy, hogy különböző feltételekre és eseményfigyelőkre osztja fel őket. Ez csökkenti az ütközések lehetőségét, mivel minden animáció külön működik.
9. Mit tesz prevScrollpos és currentScrollPos csinálni egy görgetős animációban?
10. Ezek a változók azt figyelik, hol görget a felhasználó. Az előző görgetési pozíció tárolásra kerül prevScrollpos, és az aktuális görgetési pozíció tárolásra kerül currentScrollPos. Összehasonlítva meg lehet állapítani, hogy a felhasználó felfelé vagy lefelé görget-e.

Utolsó gondolatok a médialekérdezés alapú animációkról

Összefoglalva, egy reszponzív webhely létrehozásához JavaScript-animációk kezelésére van szükség különféle eszközökön. A fejlesztők optimális felhasználói élményt biztosíthatnak azáltal, hogy a képernyő szélessége alapján meghatározott animációkat indítanak el olyan eszközök használatával, mint pl. window.matchMedia().

Megfelelő megvalósítás esetén a webhelyek javíthatják vizuális viselkedésüket és teljesítményüket különböző eszközökön. Ennek egyik módja a görgetős animációk szelektív alkalmazása és elkülönítése. Ez a módszer zökkenőmentes átmenetet garantál az asztali és mobil animációk között, és segít megelőzni a szkriptek ütközését.