Correzione delle animazioni JavaScript dipendenti dai media per siti Web reattivi

Comprensione del problema delle animazioni JavaScript condizionali

Spesso è necessario incorporare comportamenti distinti per diversi tipi di dispositivi o dimensioni dello schermo quando si utilizza il responsive web design. Può essere difficile utilizzare JavaScript in questa situazione per controllare le animazioni basate sulle query multimediali. Quando due animazioni, una per ciascun dispositivo, non funzionano contemporaneamente come previsto, si tratta di un problema comune.

In questo scenario vengono utilizzate due animazioni JavaScript: una per uno "scorrimento di navigazione" (adatto a schermi più grandi) e un'altra per uno "scorrimento CTA" (invito all'azione) destinato a dispositivi più piccoli. La difficoltà sta nel garantire che ogni animazione venga riprodotta separatamente in base alla larghezza dello schermo evitando le collisioni.

Quando due animazioni sono impostate in tag di script diversi e solo una di esse funziona correttamente, si verifica un problema. Se implementati con noncuranza, unirli sotto un'unica condizione o combinare tag di script può causare ulteriori problemi, specialmente quando si utilizzano query multimediali come `window.matchMedia()`.

Questo post spiegherà come utilizzare le condizioni multimediali per organizzare il tuo JavaScript in modo che ogni animazione funzioni come previsto. Per fornire transizioni fluide tra dispositivi mobili e schermi più grandi, verrà posta una forte enfasi su dichiarazioni condizionali e query sui media appropriate.

Gestione delle animazioni JavaScript in base alle dimensioni dello schermo

I primi esempi di script JavaScript sono stati realizzati per risolvere il problema di avere due animazioni diverse: una per desktop e una per dispositivi mobili. Assicurarsi che ogni animazione venga avviata solo quando necessario, a seconda della larghezza dello schermo del dispositivo, è la sfida principale. IL finestra.matchMedia() A tale scopo viene utilizzata una tecnica che consente al codice di identificare le istanze in cui sono soddisfatte specifiche condizioni di media query. Gli script assicurano che ciascuna animazione funzioni separatamente in base alle dimensioni dello schermo utilizzando condizioni diverse per desktop (larghezza minima: 450 px) e dispositivi mobili (larghezza massima: 450 px).

Il comportamento di scorrimento dello schermo più grande per la barra di navigazione viene gestito nel primo script. A seconda della direzione dello scorrimento, il navigazione la barra rimane visibile o scompare quando l'utente scorre verso l'alto o verso il basso. Utilizzando il precedenteScrollpos E correnteScrollPos variabili, questo viene gestito confrontando le posizioni di scorrimento precedente e corrente. Lo scorrimento verso l'alto fa riapparire la barra di navigazione impostando la sua posizione superiore su 0, mentre lo scorrimento verso il basso la fa scomparire spostandola fuori dalla vista con un valore superiore negativo.

Il secondo script riguarda il pulsante "call to action" (CTA) sui dispositivi mobili. Tutte le dimensioni dello schermo mostrano il pulsante CTA, ma si anima solo quando la larghezza dello schermo è inferiore a 450 pixel. Quando l'utente scorre verso l'alto, il pulsante scorre dal lato sinistro dello schermo; quando scorrono verso il basso, il pulsante scompare dalla vista. Con la stessa logica di confronto della posizione di scorrimento della barra di navigazione, questo comportamento è paragonabile. Tuttavia, anziché alterare il valore superiore, modifica la posizione sinistra del pulsante, facendolo apparire o scomparire in base alla direzione dello scorrimento.

I due script sono pensati per funzionare separatamente l'uno dall'altro. Sono, tuttavia, incapsulati in espressioni condizionali che verificano la larghezza dello schermo per prevenire conflitti. Con mediaQuery.matches, le query multimediali possono essere utilizzate direttamente in JavaScript, consentendo agli script di passare dinamicamente tra le due animazioni senza interferire tra loro. Mantenendo le animazioni estranee all'interno delle larghezze dello schermo designate, questo approccio modulare migliora l'efficienza e garantisce un funzionamento senza interruzioni su desktop e dispositivi mobili.

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

Ottimizzazione di JavaScript per animazioni reattive

Una componente cruciale dello sviluppo di siti Web reattivi è assicurarsi che le transizioni e le animazioni rispondano in modo diverso su dispositivi di dimensioni diverse. Una gestione efficace delle condizioni è fondamentale quando si lavora con query multimediali e JavaScript, in particolare quando le animazioni devono essere avviate solo su particolari dimensioni dello schermo. Qui è dove ascoltatori di eventi dinamici e finestra.matchMedia() entrare in gioco. Con l'aiuto di questi strumenti, gli sviluppatori possono garantire che le animazioni vengano avviate solo quando vengono soddisfatti determinati criteri, migliorando l'esperienza utente e le prestazioni sia su piattaforme desktop che mobili.

La gestione di numerose animazioni eseguite contemporaneamente presenta un'altra difficoltà per le animazioni JavaScript che dipendono dai media. Dividere la funzionalità in ascoltatori di eventi modulari e più gestibili può fare miracoli in questa situazione. È più efficiente separare le varie funzionalità e attivarle in base a particolari query multimediali piuttosto che eseguire tutti gli script contemporaneamente. Ciò garantisce che ogni script funzioni come previsto sul dispositivo appropriato e aiuta a risparmiare un carico inutile del browser.

L'ottimizzazione delle prestazioni per i dispositivi mobili è particolarmente cruciale quando si lavora con animazioni reattive. Poiché i dispositivi mobili spesso hanno una potenza di elaborazione inferiore rispetto ai desktop, le prestazioni sui dispositivi mobili possono essere migliorate riducendo la complessità degli script. Questa istanza di utilizzo di onscroll il gestore eventi garantisce efficacemente il corretto funzionamento delle animazioni specifiche per dispositivi mobili come il "cta scroll" senza gravare sulle risorse del dispositivo. Inoltre, garantisce che i dispositivi più grandi carichino animazioni proporzionate solo alle dimensioni dello schermo.