Media-afhankelijke JavaScript-animaties voor responsieve websites repareren

Het probleem van voorwaardelijke JavaScript-animaties begrijpen

Bij het gebruik van responsief webontwerp is het vaak nodig om verschillend gedrag voor verschillende soorten apparaten of schermformaten op te nemen. In deze situatie kan het een uitdaging zijn om JavaScript te gebruiken om animaties te besturen op basis van mediaquery's. Wanneer twee animaties (één voor elk apparaat) niet tegelijkertijd functioneren zoals verwacht, is dat een veelvoorkomend probleem.

In dit scenario worden twee JavaScript-animaties gebruikt: één voor een ‘navigation scroll’ (geschikt voor grotere schermen) en een andere voor een ‘cta scroll’ (call-to-action) bedoeld voor kleinere apparaten. De moeilijkheid ligt in het ervoor zorgen dat elke animatie afzonderlijk wordt afgespeeld op basis van de schermbreedte, terwijl botsingen worden voorkomen.

Wanneer twee animaties in verschillende scripttags zijn geplaatst en slechts één ervan correct functioneert, treedt er een probleem op. Als het onzorgvuldig wordt geïmplementeerd, kan het samenvoegen ervan onder een enkele voorwaarde of het combineren van scripttags tot verdere problemen leiden, vooral bij het gebruik van mediaquery's zoals `window.matchMedia()`.

In dit bericht wordt besproken hoe u mediavoorwaarden kunt gebruiken om uw JavaScript zo te organiseren dat elke animatie presteert zoals bedoeld. Om naadloze overgangen tussen mobiele en grotere schermen te bieden, zal het een sterke nadruk leggen op passende voorwaardelijke verklaringen en mediaquery's.

JavaScript-animaties beheren op basis van schermgrootte

De eerdere voorbeelden van JavaScript-scripts zijn gemaakt om het probleem van twee verschillende animaties aan te pakken: één voor desktop en één voor mobiele apparaten. Ervoor zorgen dat elke animatie alleen start wanneer deze nodig is, afhankelijk van de schermbreedte van het apparaat, is de belangrijkste uitdaging. De venster.matchMedia() Om dit te bereiken wordt een techniek gebruikt, waardoor de code gevallen kan identificeren waarin aan specifieke mediaqueryvoorwaarden wordt voldaan. De scripts zorgen ervoor dat elke animatie afzonderlijk functioneert op basis van de schermgrootte door verschillende voorwaarden te gebruiken voor desktop (min. breedte: 450 px) en mobiel (max. breedte: 450 px).

Het grotere schermschuifgedrag voor de navigatiebalk wordt afgehandeld in het eerste script. Afhankelijk van de richting van de scroll, wordt de navigatie De balk blijft zichtbaar of verdwijnt wanneer de gebruiker omhoog of omlaag scrollt. Met behulp van de vorigeScrollpos En huidigeScrollPos variabelen, wordt dit beheerd door de vorige en huidige scrollposities te vergelijken. Naar boven scrollen zorgt ervoor dat de navigatiebalk opnieuw verschijnt door de bovenste positie op 0 te zetten, en naar beneden scrollen zorgt ervoor dat deze verdwijnt door hem uit het zicht te verschuiven met een negatieve topwaarde.

Het tweede script gaat over de ‘call-to-action’ (CTA)-knop op mobiele apparaten. Alle schermformaten geven de CTA-knop weer, maar deze animeert alleen als de schermbreedte minder dan 450 pixels is. Wanneer de gebruiker omhoog scrollt, schuift de knop vanaf de linkerkant van het scherm naar binnen; als ze naar beneden scrollen, verdwijnt de knop uit het zicht. Met dezelfde logica voor het vergelijken van scrollposities als de navigatiebalk is dit gedrag vergelijkbaar. In plaats van de bovenste waarde te wijzigen, wordt echter de linkerlocatie van de knop gewijzigd, waardoor deze verschijnt of verdwijnt op basis van de richting van het scrollen.

De twee scripts zijn bedoeld om afzonderlijk van elkaar te werken. Ze zijn echter ingekapseld in voorwaardelijke expressies die de schermbreedte verifiëren om conflicten te voorkomen. Met mediaQuery.matcheskunnen mediaquery's rechtstreeks in JavaScript worden gebruikt, waardoor de scripts dynamisch kunnen overschakelen tussen de twee animaties zonder elkaar te verstoren. Door externe animaties binnen de aangegeven schermbreedtes te houden, verbetert deze modulaire aanpak de efficiëntie en garandeert een naadloze werking op desktop- en mobiele apparaten.

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

JavaScript optimaliseren voor responsieve animaties

Een cruciaal onderdeel van het ontwikkelen van responsieve websites is ervoor zorgen dat overgangen en animaties anders reageren op apparaten van verschillende grootte. Effectief conditiebeheer is van cruciaal belang bij het werken met mediaquery's en JavaScript, vooral wanneer animaties bedoeld zijn om alleen op bepaalde schermformaten te verschijnen. Dit is waar dynamische gebeurtenislisteners en venster.matchMedia() komen in het spel. Met behulp van deze tools kunnen ontwikkelaars ervoor zorgen dat animaties alleen worden gestart als aan bepaalde criteria is voldaan, waardoor de gebruikerservaring en prestaties op zowel desktop- als mobiele platforms worden verbeterd.

Het verwerken van talloze animaties die tegelijk worden uitgevoerd, levert een ander probleem op voor JavaScript-animaties die afhankelijk zijn van media. Het verdelen van functionaliteit in beter beheersbare, modulaire gebeurtenislisteners kan in deze situatie wonderen verrichten. Het is efficiënter om verschillende functionaliteiten te scheiden en te activeren op basis van bepaalde mediaquery's, in plaats van alle scripts in één keer uit te voeren. Dit zorgt ervoor dat elk script werkt zoals bedoeld op het juiste apparaat en helpt onnodige browserbelasting te voorkomen.

Prestatie-optimalisatie voor mobiele apparaten is vooral cruciaal bij het werken met responsieve animaties. Omdat mobiele apparaten vaak een lagere verwerkingskracht hebben dan desktops, kunnen de prestaties op mobiele apparaten worden verbeterd door de scriptcomplexiteit te verminderen. Dit voorbeeld van het gebruik van de onscrollen event handler garandeert effectief de soepele werking van mobielspecifieke animaties zoals de "cta scroll" zonder de bronnen van het apparaat te belasten. Bovendien garandeert het dat grotere apparaten alleen animaties laden die evenredig zijn aan de schermgrootte.