Remedierea animațiilor JavaScript dependente de media pentru site-uri web receptive

Înțelegerea problemei animațiilor JavaScript condiționate

Este adesea necesar să se încorporeze comportamente distincte pentru diferite tipuri de dispozitive sau dimensiuni de ecran atunci când se utilizează design web responsive. Poate fi dificil să folosiți JavaScript în această situație pentru a controla animațiile bazate pe interogări media. Când două animații – una pentru fiecare dispozitiv – nu funcționează simultan așa cum era anticipat, aceasta este o problemă comună.

Două animații JavaScript sunt folosite în acest scenariu: una pentru un „defilare de navigare” (potrivit pentru ecrane mai mari) și alta pentru un „defilare CTA” (îndemn la acțiune) destinat dispozitivelor mai mici. Dificultatea constă în a vă asigura că fiecare animație este redată separat, în funcție de lățimea ecranului, evitând în același timp coliziunile.

Când două animații sunt setate în etichete de script diferite și doar una dintre ele funcționează corect, apare o problemă. Dacă sunt implementate neglijent, îmbinarea lor într-o singură condiție sau combinarea etichetelor de script poate duce la probleme suplimentare, mai ales când se utilizează interogări media, cum ar fi `window.matchMedia()`.

Această postare va descrie cum să utilizați condițiile media pentru a vă organiza JavaScript, astfel încât fiecare animație să funcționeze conform intenției. Pentru a oferi tranziții fără întreruperi între ecranele mobile și cele mai mari, se va pune un accent puternic pe declarațiile condiționate adecvate și pe interogările media.

Gestionarea animațiilor JavaScript în funcție de dimensiunea ecranului

Exemplele anterioare de scripturi JavaScript au fost create pentru a rezolva problema de a avea două animații diferite - una pentru desktop și alta pentru dispozitive mobile. Asigurarea că fiecare animație începe doar atunci când este nevoie, în funcție de lățimea ecranului dispozitivului, este provocarea principală. The window.matchMedia() tehnica este utilizată pentru a realiza acest lucru, permițând codului să identifice cazurile în care sunt îndeplinite condiții specifice de interogare media. Scripturile se asigură că fiecare animație funcționează separat în funcție de dimensiunea ecranului, utilizând condiții diferite pentru desktop (lățime minimă: 450 px) și mobil (lățime maximă: 450 px).

Comportamentul de defilare a ecranului mai mare pentru bara de navigare este gestionat în primul script. În funcție de direcția derulării, navigare bara fie rămâne vizibilă, fie dispare atunci când utilizatorul derulează în sus sau în jos. Folosind prevScrollpos şi currentScrollPos variabile, aceasta este gestionată prin compararea pozițiilor de defilare anterioare și curente. Derularea în sus face ca bara de navigare să reapară prin setarea poziției sale de sus la 0, iar derularea în jos face ca aceasta să dispară prin deplasarea acesteia din vedere cu o valoare superioară negativă.

Al doilea script tratează butonul „îndemn la acțiune” (CTA) pe dispozitivele mobile. Toate dimensiunile ecranului afișează butonul CTA, dar se animează numai atunci când lățimea ecranului este mai mică de 450 de pixeli. Când utilizatorul derulează în sus, butonul alunecă din partea stângă a ecranului; când derulează în jos, butonul dispare din vedere. Cu aceeași logică de comparare a poziției de defilare ca și bara de navigare, acest comportament este comparabil. Cu toate acestea, în loc să modifice valoarea de sus, modifică locația din stânga a butonului, făcându-l fie să apară, fie să dispară în funcție de direcția derulării.

Cele două scripturi sunt menite să funcționeze separat unul de celălalt. Ele sunt, totuși, încapsulate în expresii condiționate care verifică lățimea ecranului pentru a preveni conflictele. Cu mediaQuery.potriviri, interogările media pot fi folosite direct în JavaScript, permițând scripturilor să tranzițieze dinamic între cele două animații, fără a interfera una cu cealaltă. Prin menținerea animațiilor străine în lățimile lor de ecran desemnate, această abordare modulară sporește eficiența și garantează o funcționare perfectă pe desktop și dispozitive mobile.

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

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

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

Optimizarea JavaScript pentru animații receptive

O componentă crucială a dezvoltării de site-uri web care sunt receptive este să vă asigurați că tranzițiile și animațiile răspund diferit pe dispozitive de dimensiuni diferite. Gestionarea eficientă a condițiilor este crucială atunci când lucrați cu interogări media și JavaScript, în special atunci când animațiile sunt destinate să fie lansate numai pe anumite dimensiuni de ecran. Aici ascultătorii dinamici ai evenimentelor și window.matchMedia() intra in joc. Cu ajutorul acestor instrumente, dezvoltatorii se pot asigura că animațiile se lansează numai atunci când sunt îndeplinite anumite criterii, îmbunătățind experiența utilizatorului și performanța atât pe platformele desktop, cât și pe cele mobile.

Gestionarea numeroaselor animații care rulează simultan prezintă o altă dificultate pentru animațiile JavaScript care depind de media. Împărțirea funcționalității în ascultători de evenimente mai gestionați și modulari poate face minuni în această situație. Este mai eficient să separați diferite funcționalități și să le activați pe baza unor interogări media particulare, mai degrabă decât a executa toate scripturile simultan. Acest lucru asigură că fiecare script funcționează conform intenției pe dispozitivul corespunzător și ajută la salvarea încărcării inutile a browserului.

Optimizarea performanței pentru dispozitivele mobile este crucială în special atunci când lucrați cu animații receptive. Deoarece dispozitivele mobile au frecvent o putere de procesare mai mică decât desktop-urile, performanța pe dispozitivele mobile poate fi îmbunătățită prin reducerea complexității scriptului. Acest exemplu de utilizare a onscroll Event handler garantează în mod eficient funcționarea fără probleme a animațiilor specifice dispozitivului mobil, cum ar fi „cta scroll”, fără a impune resursele dispozitivului. În plus, garantează că dispozitivele mai mari încarcă animații proporționale doar cu dimensiunea ecranului.