Oprava animácií JavaScript závislých od médií pre responzívne webové stránky

Spracovanie podmienených animácií na základe mediálnych dopytov pomocou JavaScriptu

Toto riešenie spracováva podmienené animácie závislé od šírky obrazovky pomocou JavaScriptu v spojení s window.matchMedia funkciu.

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árny prístup využívajúci samostatné prijímače udalostí pre rôzne veľkosti obrazovky

Táto verzia je efektívnejšia a modulárnejšia, pretože pre každý mediálny dotaz používa rôzne prijímače udalostí rolovania.

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žitie podmienenej logiky na Unified Scroll Handler pre mediálne dotazy

Táto metóda používa jeden poslucháč udalostí rolovania s podmienenými kontrolami v závislosti od mediálnych dopytov na spracovanie oboch animácií.

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

Často kladené otázky o JavaScriptových animáciách a mediálnych dopytoch

1. Ako môžem použiť mediálne dopyty v JavaScripte?
2. JavaScript vám umožňuje aplikovať mediálne dopyty s window.matchMedia(). Tento spôsob môžete použiť na spúšťanie rôznych skriptov na základe šírky obrazovky.
3. Ako môžem ovládať animácie na základe veľkosti obrazovky?
4. Použite window.matchMedia() na určenie šírky obrazovky na ovládanie animácií. Potom podľa potreby pridajte alebo odstráňte prijímače udalostí. To zaručuje, že v závislosti od veľkosti obrazovky sa prehrá iba príslušná animácia.
5. Aký je najlepší spôsob optimalizácie animácií posúvania?
6. Znížením počtu operácií vykonaných v rámci udalosti rolovania window.onscroll možno efektívnejšie použiť pri optimalizácii animácie posúvania. Keď sa zistí rolovanie, až potom sa vykoná požadovaná logika animácie.
7. Ako spracujem viacero animácií v JavaScripte?
8. Viaceré animácie je možné spravovať ich rozdelením do rôznych podmienok a poslucháčov udalostí. Tým sa znižuje možnosť konfliktov, pretože každá animácia funguje samostatne.
9. Čo robí prevScrollpos a currentScrollPos robiť v rolovacej animácii?
10. Tieto premenné monitorujú, kde sa používateľ posúva. Predchádzajúca pozícia rolovania sa uloží prevScrollposa uloží sa aktuálna pozícia rolovania currentScrollPos. Porovnaním je možné zistiť, či používateľ roluje nahor alebo nadol.

Záverečné myšlienky o animáciách založených na dopyte médií

Na záver, vytvorenie responzívneho webu si vyžaduje správu JavaScript animácií pre rôzne zariadenia. Vývojári môžu poskytnúť optimálnu používateľskú skúsenosť spúšťaním špecifických animácií na základe šírky obrazovky pomocou nástrojov, ako sú napr window.matchMedia().

Pri správnej implementácii môžu webové stránky zlepšiť svoje vizuálne správanie a výkon na rôznych zariadeniach. Jedným zo spôsobov, ako to dosiahnuť, je selektívne použitie animácií posúvania a ich izolácia. Táto metóda zaručuje plynulé prechody medzi animáciami pre počítače a mobilné zariadenia a pomáha predchádzať konfliktom medzi skriptami.