Oprava animací JavaScriptu závislých na médiích pro responzivní weby

Zpracování podmíněných animací na základě mediálních dotazů pomocí JavaScriptu

Toto řešení zpracovává podmíněné animace závislé na šířce obrazovky pomocí JavaScriptu ve spojení s window.matchMedia funkce.

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ární přístup využívající samostatné posluchače událostí pro různé velikosti obrazovky

Tato verze je efektivnější a modulární, protože používá různé posluchače událostí posouvání pro každý mediální dotaz.

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

Použití podmíněné logiky na Unified Scroll Handler pro dotazy na média

Tato metoda používá ke zpracování obou animací jeden posluchač události posouvání s podmíněnými kontrolami v závislosti na dotazech na média.

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

Nejčastější dotazy k JavaScriptovým animacím a mediálním dotazům

1. Jak mohu používat dotazy na média v JavaScriptu?
2. JavaScript vám umožňuje aplikovat dotazy na média s window.matchMedia(). Tímto způsobem můžete spouštět různé skripty na základě šířky obrazovky.
3. Jak mohu ovládat animace na základě velikosti obrazovky?
4. Použití window.matchMedia() k určení šířky obrazovky za účelem ovládání animací. Poté podle potřeby přidejte nebo odeberte posluchače událostí. To zaručuje, že v závislosti na velikosti obrazovky se přehraje pouze příslušná animace.
5. Jaký je nejlepší způsob optimalizace animací posouvání?
6. Snížením počtu operací prováděných uvnitř události posouvání window.onscroll lze efektivněji použít při optimalizaci animace posouvání. Když je detekován posun, teprve potom se provede požadovaná logika animace.
7. Jak zpracuji více animací v JavaScriptu?
8. Více animací lze spravovat jejich rozdělením do různých podmínek a posluchačů událostí. To snižuje možnost konfliktů, protože každá animace funguje samostatně.
9. Co dělá prevScrollpos a currentScrollPos dělat v animaci rolování?
10. Tyto proměnné sledují, kde se uživatel posouvá. Předchozí pozice rolování je uložena prevScrollposa aktuální pozice rolování se uloží currentScrollPos. Porovnáním je možné zjistit, zda uživatel roluje nahoru nebo dolů.

Závěrečné úvahy o animacích založených na dotazech médií

Závěrem lze říci, že vytvoření responzivního webu vyžaduje správu JavaScriptových animací pro různá zařízení. Vývojáři mohou poskytnout optimální uživatelskou zkušenost spouštěním konkrétních animací na základě šířky obrazovky pomocí nástrojů, jako je např window.matchMedia().

Při správné implementaci mohou webové stránky zlepšit své vizuální chování a výkon na různých zařízeních. Jedním ze způsobů, jak toho dosáhnout, je selektivní použití animací posouvání a jejich izolace. Tato metoda zaručuje plynulé přechody mezi animacemi pro stolní počítače a mobilními zařízeními a pomáhá předcházet kolizím skriptů.