Reageerivate veebisaitide meediast sõltuvate JavaScripti animatsioonide parandamine

Reageerivate veebisaitide meediast sõltuvate JavaScripti animatsioonide parandamine
Reageerivate veebisaitide meediast sõltuvate JavaScripti animatsioonide parandamine

Tingimuslike JavaScript-animatsioonide probleemi mõistmine

Reageeriva veebidisaini kasutamisel on sageli vaja eri tüüpi seadmete või ekraanisuuruste jaoks kasutada erinevaid käitumisviise. Selles olukorras võib JavaScripti kasutamine meediapäringutel põhinevate animatsioonide juhtimiseks olla keeruline. Kui kaks animatsiooni – üks kummagi seadme jaoks – ei tööta samaaegselt ootuspäraselt, on see tavaline probleem.

Selles stsenaariumis kasutatakse kahte JavaScripti animatsiooni: ühte "navigeerimiskerimiseks" (sobib suurematele ekraanidele) ja teist "cta-kerimiseks" (kutse tegevusele), mis on mõeldud väiksematele seadmetele. Raskus seisneb selles, et iga animatsiooni esitatakse vastavalt ekraani laiusele eraldi, vältides samal ajal kokkupõrkeid.

Kui kaks animatsiooni on seatud erinevatele skriptimärgenditele ja ainult üks neist töötab korralikult, ilmneb probleem. Kui neid rakendatakse hooletult, võib nende ühendamine ühe tingimusega või skriptimärgendi kombineerimine põhjustada täiendavaid probleeme, eriti kui kasutatakse meediumipäringuid, näiteks "window.matchMedia()".

Selles postituses käsitletakse, kuidas kasutada meediatingimusi JavaScripti korraldamiseks nii, et iga animatsioon toimiks ettenähtud viisil. Sujuva ülemineku tagamiseks mobiiliekraanide ja suuremate ekraanide vahel paneb see suurt rõhku sobivatele tingimuslausetele ja meediapäringutele.

Käsk Kasutusnäide
window.matchMedia() JavaScript kasutab seda tehnikat meediumipäringute rakendamiseks. Ekraani suuruse põhjal määrab see, kas dokument vastab antud CSS-i meediumipäringule, ja käivitab vastavad JavaScripti toimingud. Selle skripti abil on lihtsam eristada animatsioone suuremate kuvade ja mobiilseadmete jaoks.
addEventListener("change", callback) See käsk jälgib meediumipäringu oleku muudatusi. Tagasihelistamise funktsioon teostatakse, kui ekraani laius ületab etteantud läve (nt 450 pikslit). See võimaldab dünaamilist reageerimist ilma lehe värskendamist nõudmata.
removeEventListener("scroll", callback) Kõrvaldades ebaõige ekraanisuurusega sündmuste mõttetu käsitlemise, optimeerib see käsk kiirust, eemaldades kerimissündmuste kuulaja, kui seda enam ei vajata. Meediapäringute vaheldumisel on see hädavajalik.
window.pageYOffset See atribuut tagastab dokumendis üles-alla keritud pikslite arvu. Seda kasutatakse selleks, et tuvastada, kas kasutaja kerib üles või alla, ja jälgida kerimisasendit.
element.style.top See käsk reguleerib elemendi ülemist CSS-i atribuuti, mis juhib elemendi vertikaalset asendit lehel. Siin kasutatakse seda selleks, et määrata, kus kasutaja kerimisriba tuleb kuvada või peita.
element.style.left See käsk liigutab elemente horisontaalselt, reguleerides vasakut CSS-i atribuuti, täpselt nagu element.style.top seda teeb. Mobiilseadmetes kasutatakse seda tegevusele kutsuva nupu vaate sisse ja välja libistamiseks.
mediaQuery.matches See atribuut kontrollib, kas meediumipäring ja dokument kattuvad. Veendumaks, et mobiilseadmetes, mitte lauaarvutites, rakendatakse sobivat animatsiooni, on oluline käivitada vastavad animatsioonid ekraani laiuse alusel.
prevScrollpos >prevScrollpos > currentScrollPos Kerimissuuna (üles või alla) määramiseks kontrollib see tingimus eelmise ja praeguse iteratsiooni kerimiskohti. Väga oluline on määrata, kuidas üksused peaksid kerimisele reageerima – näiteks nuppe või navigeerimisribasid paljastades või peites.
onscroll Integreeritud sündmuste käitleja, mille käivitab kasutaja kerimisel. Võrreldes eelmist ja praegust kerimisasendit, teostab see kerimispõhiseid animatsioone.

JavaScripti animatsioonide haldamine ekraani suuruse järgi

Varasemad JavaScripti skriptide näited loodi kahe erineva animatsiooni probleemi lahendamiseks – üks lauaarvutitele ja teine ​​mobiilseadmetele. Peamine väljakutse on tagada, et iga animatsioon käivitub ainult siis, kui seda vajatakse, olenevalt seadme ekraani laiusest. The window.matchMedia() Selle saavutamiseks kasutatakse tehnikat, mis võimaldab koodil tuvastada juhtumeid, kus konkreetsed meediumipäringu tingimused on täidetud. Skriptid tagavad, et iga animatsioon toimiks ekraani suurusest lähtuvalt eraldi, kasutades erinevaid tingimusi töölaua (min-laius: 450 pikslit) ja mobiilseadme jaoks (maksimaalne laius: 450 pikslit).

Navigeerimisriba suurema ekraani kerimise käitumist käsitletakse esimeses skriptis. Olenevalt kerimise suunast, navigeerimine riba jääb kas nähtavaks või kaob, kui kasutaja üles või alla kerib. Kasutades prevScrollpos ja currentScrollPos muutujad, seda hallatakse eelmise ja praeguse kerimisasendi võrdlemisega. Üles kerimisel kuvatakse navigeerimisriba uuesti, määrates selle ülemise positsiooni väärtuseks 0, ja alla kerimisel kaob see negatiivse ülemise väärtusega vaateväljast välja nihutades.

Teine skript käsitleb mobiilseadmetes nuppu "tegevusele kutsuv" (CTA). Kõigi ekraanisuuruste puhul kuvatakse CTA-nupp, kuid see animeerub ainult siis, kui ekraani laius on alla 450 piksli. Kui kasutaja kerib üles, libiseb nupp ekraani vasakust servast sisse; allapoole kerides kaob nupp vaatest. Sama kerimisasendi võrdlusloogikaga nagu navigeerimisribal on see käitumine võrreldav. Kuid selle asemel, et muuta ülemist väärtust, muudab see nupu vasakpoolset asukohta, põhjustades selle kerimise suunas kas ilmumise või kadumise.

Need kaks skripti on mõeldud töötama üksteisest eraldi. Need on aga kapseldatud tingimusavaldistesse, mis kontrollivad ekraani laiust, et vältida konflikte. Koos mediaQuery.matches, saab meediumipäringuid kasutada otse JavaScriptis, võimaldades skriptidel dünaamiliselt kahe animatsiooni vahel üksteist segamata üle minna. Hoides kõrvalised animatsioonid nende määratud ekraanilaiuste piires, suurendab see modulaarne lähenemisviis tõhusust ja tagab sujuva töö lauaarvutites ja mobiilseadmetes.

Meediumipäringutel põhinevate tingimuslike animatsioonide käsitlemine JavaScriptiga

See lahendus käsitleb tingimuslikke animatsioone, mis sõltuvad ekraani laiusest, kasutades JavaScripti koos funktsiooniga window.matchMedia funktsiooni.

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

Modulaarne lähenemine, mis kasutab erinevate ekraanisuuruste jaoks eraldi sündmusekuulajaid

See versioon on tõhusam ja modulaarsem, kuna kasutab iga meediapäringu jaoks erinevaid kerimissündmuste kuulajaid.

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

Tingimusliku loogika rakendamine meediumipäringute ühtsele kerimiskäitlejale

See meetod kasutab mõlema animatsiooni käsitlemiseks ühte kerimissündmuste kuulajat koos tingimuslike kontrollidega, mis sõltuvad meediumipäringutest.

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

JavaScripti optimeerimine reageerivate animatsioonide jaoks

Reageerivate veebisaitide väljatöötamise oluline komponent on tagada, et üleminekud ja animatsioonid reageeriksid erineva suurusega seadmetes erinevalt. Tõhus tingimuste haldamine on meediumipäringute ja JavaScriptiga töötamisel ülioluline, eriti kui animatsioonid on mõeldud käivitamiseks ainult teatud ekraanisuurustel. See on koht, kus dünaamilised sündmuste kuulajad ja window.matchMedia() mängu tulla. Nende tööriistade abil saavad arendajad tagada, et animatsioonid käivituvad ainult siis, kui teatud kriteeriumid on täidetud, parandades kasutajakogemust ja jõudlust nii laua- kui ka mobiiliplatvormidel.

Mitmete korraga töötavate animatsioonide käsitlemine tekitab meediast sõltuvate JavaScripti animatsioonide jaoks veel ühe raskuse. Funktsionaalsuse jagamine paremini juhitavateks, modulaarseteks sündmuste kuulajateks võib selles olukorras imesid teha. Tõhusam on eraldada erinevad funktsioonid ja aktiveerida need konkreetsete meediumipäringute alusel, mitte kõiki skripte korraga käivitada. See tagab, et iga skript töötab vastavas seadmes ettenähtud viisil ja aitab säästa asjatut brauseri koormust.

Mobiilseadmete jõudluse optimeerimine on eriti oluline tundlike animatsioonidega töötamisel. Kuna mobiilseadmetel on sageli väiksem töötlemisvõimsus kui lauaarvutitel, saab mobiilseadmete jõudlust parandada, vähendades skriptide keerukust. See kasutusjuht kerimine sündmuste käitleja tagab tõhusalt mobiilispetsiifiliste animatsioonide (nt "cta scroll") sujuva toimimise ilma seadme ressursse maksustamata. Lisaks tagab see, et suuremad seadmed laadivad animatsioone ainult ekraani suurusega proportsionaalselt.

Korduma kippuvad küsimused JavaScripti animatsioonide ja meediapäringute kohta

  1. Kuidas kasutada JavaScriptis meediapäringuid?
  2. JavaScript võimaldab teil rakendada meediumipäringuid window.matchMedia(). Seda võimalust saate kasutada erinevate skriptide käivitamiseks ekraani laiuse alusel.
  3. Kuidas juhtida animatsioone ekraani suuruse järgi?
  4. Kasuta window.matchMedia() ekraani laiuse määramiseks animatsioonide juhtimiseks. Seejärel lisage või eemaldage vajadusel sündmuste kuulajaid. See tagab, et olenevalt ekraani suurusest esitatakse ainult asjakohane animatsioon.
  5. Milline on parim viis kerimisanimatsioonide optimeerimiseks?
  6. Vähendades kerimissündmuses tehtavate toimingute arvu, window.onscroll saab tõhusamalt kasutada kerimisanimatsiooni optimeerimisel. Kui kerimine tuvastatakse, käivitub vajalik animatsiooniloogika alles siis.
  7. Kuidas käsitleda JavaScriptis mitut animatsiooni?
  8. Mitut animatsiooni saab hallata, jagades need erinevateks tingimusteks ja sündmuste kuulajateks. See vähendab konfliktide võimalust, kuna iga animatsioon töötab eraldi.
  9. Mis teeb prevScrollpos ja currentScrollPos teha kerimisanimatsioonis?
  10. Need muutujad jälgivad, kus kasutaja kerib. Eelmine kerimisasend salvestatakse prevScrollpos, ja praegune kerimisasend salvestatakse currentScrollPos. Võrreldes on võimalik kindlaks teha, kas kasutaja kerib üles või alla.

Viimased mõtted meediapäringupõhiste animatsioonide kohta

Kokkuvõtteks võib öelda, et responsiivse veebisaidi loomine nõuab JavaScripti animatsioonide haldamist erinevatele seadmetele. Arendajad saavad pakkuda optimaalset kasutajakogemust, käivitades ekraani laiuse põhjal konkreetseid animatsioone, kasutades selliseid tööriistu nagu window.matchMedia().

Õige rakendamise korral võivad veebisaidid parandada oma visuaalset käitumist ja jõudlust erinevates seadmetes. Üks võimalus seda teha on kerimisanimatsioonide valikuline rakendamine ja nende eraldamine. See meetod tagab sujuva ülemineku töölaua- ja mobiilianimatsioonide vahel ning aitab vältida skriptide kokkupõrkeid.

Viited JavaScripti meediumipäringutele ja animatsioonidele
  1. See artikkel on inspireeritud kohanduva veebidisaini ja JavaScripti kasutamise parimatest tavadest, mis on leitud aadressilt Mozilla Developer Network (MDN) . MDN pakub põhjalikku dokumentatsiooni selle kohta, kuidas tõhusalt kasutada window.matchMedia() ja muud meediumipäringu tehnikad JavaScriptis.
  2. Kerimispõhiste animatsioonide optimeerimise kohta koguti täiendavaid ressursse CSS-i trikid , mis annab ülevaate sellest, kuidas kerimisanimatsioonid töötavad ja neid saab kohandada erinevate ekraanisuuruste jaoks.
  3. Toimivuse optimeerimise näpunäited ja strateegiad JavaScripti haldamiseks erinevates seadmetes saadi aadressilt Ajakiri Smashing , mis rõhutab modulaarsete skriptide tähtsust tundlike veebirakenduste jaoks.