Mediariippuvien JavaScript-animaatioiden korjaaminen reagoiville verkkosivustoille

Mediakyselyihin perustuvien ehdollisten animaatioiden käsittely JavaScriptillä

Tämä ratkaisu käsittelee näytön leveydestä riippuvia ehdollisia animaatioita käyttämällä JavaScriptiä yhdessä window.matchMedia toiminto.

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

Modulaarinen lähestymistapa, jossa käytetään erillisiä tapahtumanseurantalaitteita erikokoisille näytöille

Tämä versio on tehokkaampi ja modulaarinen, koska se käyttää erilaisia ​​vieritystapahtuman kuuntelijoita jokaisessa mediakyselyssä.

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

Ehdollisen logiikan soveltaminen mediakyselyjen yhtenäiseen vierityskäsittelijään

Tämä menetelmä käsittelee molempia animaatioita yhtä vieritystapahtuman kuuntelijaa ja ehdollisia tarkistuksia mediakyselyistä riippuen.

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

Usein kysytyt kysymykset JavaScript-animaatioista ja mediakyselyistä

1. Kuinka käytän mediakyselyitä JavaScriptissä?
2. JavaScriptin avulla voit käyttää mediakyselyjä window.matchMedia(). Voit käyttää tätä tapaa ajaaksesi erilaisia ​​skriptejä näytön leveyden mukaan.
3. Kuinka ohjaan animaatioita näytön koon perusteella?
4. Käyttää window.matchMedia() määrittääksesi näytön leveyden animaatioiden ohjaamiseksi. Lisää tai poista sitten tapahtumakuuntelijoita tarpeen mukaan. Tämä takaa, että näytön koosta riippuen vain asiaankuuluva animaatio toistetaan.
5. Mikä on paras tapa optimoida vieritysanimaatioita?
6. Vähentämällä vieritystapahtuman sisällä suoritettavien toimintojen määrää, window.onscroll voidaan käyttää tehokkaammin vieritysanimaatioiden optimoinnissa. Kun vieritys havaitaan, vaadittu animaatiologiikka suoritetaan vasta sitten.
7. Kuinka käsittelen useita animaatioita JavaScriptissä?
8. Useita animaatioita voidaan hallita jakamalla ne eri olosuhteisiin ja tapahtumakuuntelijoihin. Tämä vähentää ristiriitojen mahdollisuutta, koska jokainen animaatio toimii erikseen.
9. Mitä tekee prevScrollpos ja currentScrollPos tehdä rullaanimaatiossa?
10. Nämä muuttujat valvovat, missä käyttäjä vierittää. Edellinen vierityskohta tallennetaan prevScrollpos, ja nykyinen vierityskohta tallennetaan currentScrollPos. On mahdollista kertoa, vierittääkö käyttäjä ylös vai alas vertaamalla niitä.

Viimeisiä ajatuksia mediakyselyihin perustuvista animaatioista

Yhteenvetona voidaan todeta, että responsiivisen verkkosivuston luominen edellyttää JavaScript-animaatioiden hallintaa eri laitteille. Kehittäjät voivat tarjota optimaalisen käyttökokemuksen käynnistämällä tiettyjä animaatioita näytön leveyden perusteella käyttämällä työkaluja, kuten window.matchMedia().

Oikein toteutettuina verkkosivustot voivat parantaa visuaalista käyttäytymistään ja suorituskykyään eri laitteilla. Yksi tapa tehdä tämä on käyttää vieritysanimaatioita valikoivasti ja eristää ne. Tämä menetelmä takaa saumattomat siirtymät työpöytä- ja mobiilianimaatioiden välillä ja auttaa estämään skriptien ristiriitoja.