Correction des animations JavaScript dépendantes des médias pour les sites Web réactifs

Comprendre le problème des animations JavaScript conditionnelles

Il est souvent nécessaire d’incorporer des comportements distincts pour différents types d’appareils ou tailles d’écran lors de l’utilisation d’une conception Web réactive. Il peut être difficile d'utiliser JavaScript dans cette situation pour contrôler les animations basées sur des requêtes multimédias. Lorsque deux animations (une pour chaque appareil) ne fonctionnent pas simultanément comme prévu, il s'agit d'un problème courant.

Deux animations JavaScript sont utilisées dans ce scénario : une pour un « défilement de navigation » (adapté aux écrans plus grands) et une autre pour un « défilement cta » (appel à l'action) destiné aux appareils plus petits. La difficulté réside dans le fait de s'assurer que chaque animation se déroule séparément en fonction de la largeur de l'écran tout en évitant les collisions.

Lorsque deux animations sont définies dans des balises de script différentes et qu'une seule d'entre elles fonctionne correctement, un problème survient. S'ils sont mis en œuvre avec négligence, leur fusion sous une seule condition ou la combinaison de balises de script peuvent entraîner d'autres problèmes, en particulier lors de l'utilisation de requêtes multimédias telles que « window.matchMedia() ».

Cet article explique comment utiliser les conditions multimédias pour organiser votre JavaScript afin que chaque animation fonctionne comme prévu. Pour assurer des transitions transparentes entre les écrans mobiles et les écrans plus grands, l'accent sera fortement mis sur les instructions conditionnelles et les requêtes multimédias appropriées.

Gestion des animations JavaScript en fonction de la taille de l'écran

Les exemples précédents de scripts JavaScript ont été créés pour résoudre le problème de la présence de deux animations différentes : une pour les ordinateurs de bureau et une pour les appareils mobiles. S'assurer que chaque animation ne démarre que lorsqu'elle est nécessaire, en fonction de la largeur de l'écran de l'appareil, constitue le principal défi. Le fenêtre.matchMedia() Une technique est utilisée pour y parvenir, permettant au code d'identifier les instances dans lesquelles des conditions spécifiques de requête multimédia sont satisfaites. Les scripts garantissent que chaque animation fonctionne séparément en fonction de la taille de l'écran en utilisant des conditions différentes pour le bureau (largeur minimale : 450 px) et le mobile (largeur maximale : 450 px).

Un comportement de défilement d'écran plus grand pour la barre de navigation est géré dans le premier script. Selon le sens du défilement, le navigation la barre reste visible ou disparaît lorsque l'utilisateur fait défiler vers le haut ou vers le bas. En utilisant le précédentScrollpos et currentScrollPos variables, ceci est géré en comparant les positions de défilement précédentes et actuelles. Le défilement vers le haut fait réapparaître la barre de navigation en définissant sa position supérieure sur 0, et le défilement vers le bas la fait disparaître en la déplaçant hors de vue avec une valeur supérieure négative.

Le deuxième script concerne le bouton « appel à l'action » (CTA) sur les appareils mobiles. Toutes les tailles d'écran affichent le bouton CTA, mais il ne s'anime que lorsque la largeur de l'écran est inférieure à 450 pixels. Lorsque l'utilisateur fait défiler vers le haut, le bouton glisse depuis le côté gauche de l'écran ; lorsqu'ils font défiler vers le bas, le bouton disparaît de la vue. Avec la même logique de comparaison de position de défilement que la barre de navigation, ce comportement est comparable. Cependant, plutôt que de modifier la valeur supérieure, il modifie l'emplacement gauche du bouton, le faisant apparaître ou disparaître en fonction de la direction du défilement.

Les deux scripts sont censés fonctionner séparément l'un de l'autre. Ils sont cependant encapsulés dans des expressions conditionnelles qui vérifient la largeur de l'écran afin d'éviter les conflits. Avec mediaQuery.matches, les requêtes multimédias peuvent être utilisées directement en JavaScript, permettant aux scripts d'effectuer une transition dynamique entre les deux animations sans interférer l'une avec l'autre. En conservant les animations superflues dans les largeurs d'écran désignées, cette approche modulaire améliore l'efficacité et garantit un fonctionnement transparent sur les ordinateurs de bureau et les appareils mobiles.

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

Optimisation de JavaScript pour les animations réactives

Un élément crucial du développement de sites Web réactifs est de s’assurer que les transitions et les animations réagissent différemment sur des appareils de différentes tailles. Une gestion efficace des conditions est cruciale lorsque vous travaillez avec des requêtes multimédias et JavaScript, en particulier lorsque les animations sont destinées à être lancées uniquement sur des tailles d'écran particulières. C'est ici que les auditeurs d'événements dynamiques et fenêtre.matchMedia() entrer en jeu. Avec l'aide de ces outils, les développeurs peuvent s'assurer que les animations ne se lancent que lorsque certains critères sont remplis, améliorant ainsi l'expérience utilisateur et les performances sur les plates-formes de bureau et mobiles.

La gestion de nombreuses animations exécutées simultanément présente une autre difficulté pour les animations JavaScript qui dépendent du média. Diviser les fonctionnalités en écouteurs d'événements plus gérables et modulaires peut faire des merveilles dans cette situation. Il est plus efficace de séparer les différentes fonctionnalités et de les activer en fonction de requêtes multimédia particulières plutôt que d'exécuter tous les scripts en même temps. Cela garantit que chaque script fonctionne comme prévu sur l'appareil approprié et permet d'économiser une charge inutile du navigateur.

L'optimisation des performances pour les appareils mobiles est particulièrement cruciale lorsque vous travaillez avec des animations réactives. Étant donné que les appareils mobiles ont souvent une puissance de traitement inférieure à celle des ordinateurs de bureau, les performances des appareils mobiles peuvent être améliorées en réduisant la complexité des scripts. Cet exemple d'utilisation du défilement Le gestionnaire d'événements garantit efficacement le bon fonctionnement des animations spécifiques aux mobiles telles que le "cta scroll" sans solliciter les ressources de l'appareil. De plus, cela garantit que les appareils plus grands chargeront des animations proportionnelles uniquement à la taille de l’écran.