Corrección de animaciones JavaScript dependientes del medio para sitios web responsivos

Comprender el problema de las animaciones de JavaScript condicional

A menudo es necesario incorporar comportamientos distintos para diferentes tipos de dispositivos o tamaños de pantalla cuando se utiliza un diseño web adaptable. Puede resultar complicado utilizar JavaScript en esta situación para controlar animaciones basadas en consultas de medios. Cuando dos animaciones (una para cada dispositivo) no funcionan simultáneamente como se esperaba, ese es un problema común.

En este escenario se utilizan dos animaciones de JavaScript: una para un "desplazamiento de navegación" (adecuada para pantallas más grandes) y otra para un "desplazamiento de cta" (llamada a la acción) destinada a dispositivos más pequeños. La dificultad radica en asegurarse de que cada animación se reproduzca por separado según el ancho de la pantalla y evitar colisiones.

Cuando dos animaciones se configuran en etiquetas de secuencia de comandos diferentes y solo una de ellas funciona correctamente, se produce un problema. Si se implementa descuidadamente, fusionarlos bajo una sola condición o combinar etiquetas de script puede generar más problemas, especialmente cuando se utilizan consultas de medios como `window.matchMedia()`.

Esta publicación explicará cómo utilizar las condiciones de los medios para organizar su JavaScript de modo que cada animación funcione según lo previsto. Para proporcionar transiciones fluidas entre dispositivos móviles y pantallas más grandes, pondrá un fuerte énfasis en declaraciones condicionales y consultas de medios apropiadas.

Administrar animaciones de JavaScript según el tamaño de la pantalla

Los ejemplos anteriores de scripts JavaScript se crearon para abordar el problema de tener dos animaciones diferentes: una para escritorio y otra para dispositivos móviles. El principal desafío es asegurarse de que cada animación solo comience cuando sea necesario, dependiendo del ancho de la pantalla del dispositivo. El ventana.matchMedia() Se utiliza una técnica para lograr esto, lo que permite que el código identifique instancias en las que se cumplen condiciones específicas de consulta de medios. Los scripts garantizan que cada animación funcione por separado según el tamaño de la pantalla mediante el uso de diferentes condiciones para escritorio (ancho mínimo: 450 px) y móvil (ancho máximo: 450 px).

El comportamiento de desplazamiento de pantalla más grande para la barra de navegación se maneja en el primer script. Dependiendo de la dirección del desplazamiento, el navegación La barra permanece visible o desaparece cuando el usuario se desplaza hacia arriba o hacia abajo. Usando el anteriorDesplazamientopos y currentScrollPos variables, esto se gestiona comparando las posiciones de desplazamiento anterior y actual. Desplazarse hacia arriba hace que la barra de navegación reaparezca estableciendo su posición superior en 0, y desplazarse hacia abajo hace que desaparezca al moverla fuera de la vista con un valor superior negativo.

El segundo guión trata sobre el botón de "llamado a la acción" (CTA) en dispositivos móviles. Todos los tamaños de pantalla muestran el botón CTA, pero solo se anima cuando el ancho de la pantalla es inferior a 450 píxeles. Cuando el usuario se desplaza hacia arriba, el botón se desliza desde el lado izquierdo de la pantalla; cuando se desplazan hacia abajo, el botón desaparece de la vista. Con la misma lógica de comparación de posiciones de desplazamiento que la barra de navegación, este comportamiento es comparable. Sin embargo, en lugar de alterar el valor superior, modifica la ubicación izquierda del botón, lo que hace que aparezca o desaparezca según la dirección del desplazamiento.

Los dos scripts están destinados a funcionar por separado. Sin embargo, están encapsulados en expresiones condicionales que verifican el ancho de la pantalla para evitar conflictos. Con mediaQuery.matches, las consultas de medios se pueden usar directamente en JavaScript, lo que permite que los scripts realicen una transición dinámica entre las dos animaciones sin interferir entre sí. Al mantener animaciones extrañas dentro de los anchos de pantalla designados, este enfoque modular mejora la eficiencia y garantiza un funcionamiento perfecto en dispositivos móviles y de escritorio.

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

Optimización de JavaScript para animaciones responsivas

Un componente crucial del desarrollo de sitios web responsivos es asegurarse de que las transiciones y animaciones respondan de manera diferente en dispositivos de diferentes tamaños. La gestión eficaz de las condiciones es crucial cuando se trabaja con consultas de medios y JavaScript, especialmente cuando las animaciones están destinadas a iniciarse solo en tamaños de pantalla específicos. Aquí es donde los oyentes de eventos dinámicos y ventana.matchMedia() entrar en juego. Con la ayuda de estas herramientas, los desarrolladores pueden asegurarse de que las animaciones solo se inicien cuando se cumplan ciertos criterios, mejorando la experiencia del usuario y el rendimiento tanto en plataformas de escritorio como móviles.

Manejar numerosas animaciones que se ejecutan a la vez presenta otra dificultad para las animaciones JavaScript que dependen de los medios. Dividir la funcionalidad en detectores de eventos modulares más manejables puede hacer maravillas en esta situación. Es más eficiente separar varias funcionalidades y activarlas en función de consultas de medios particulares en lugar de ejecutar todos los scripts a la vez. Esto garantiza que cada script funcione según lo previsto en el dispositivo adecuado y ayuda a ahorrar carga innecesaria en el navegador.

La optimización del rendimiento para dispositivos móviles es especialmente crucial cuando se trabaja con animaciones responsivas. Dado que los dispositivos móviles suelen tener una potencia de procesamiento menor que los ordenadores de sobremesa, el rendimiento de los dispositivos móviles se puede mejorar reduciendo la complejidad de los scripts. Este ejemplo de utilización del desplazamiento El controlador de eventos garantiza eficazmente el buen funcionamiento de animaciones específicas para dispositivos móviles, como el "cta scroll", sin sobrecargar los recursos del dispositivo. Además, garantiza que los dispositivos más grandes carguen animaciones proporcionales al tamaño de la pantalla únicamente.