Corrigindo animações JavaScript dependentes de mídia para sites responsivos

Tratamento de animações condicionais com base em consultas de mídia com JavaScript

Esta solução lida com animações condicionais dependentes da largura da tela, utilizando JavaScript em conjunto com o janela.matchMedia função.

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

Abordagem modular usando ouvintes de eventos separados para diferentes tamanhos de tela

Esta versão é mais eficiente e modular, pois usa diferentes ouvintes de eventos de rolagem para cada consulta de mídia.

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

Aplicando lógica condicional a um manipulador de rolagem unificado para consultas de mídia

Este método usa um único ouvinte de evento de rolagem com verificações condicionais dependendo das consultas de mídia para lidar com ambas as animações.

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

Perguntas frequentes sobre animações JavaScript e consultas de mídia

1. Como faço para usar consultas de mídia em JavaScript?
2. JavaScript permite que você aplique consultas de mídia com window.matchMedia(). Você pode usar esta forma para executar diferentes scripts com base na largura da tela.
3. Como posso controlar as animações com base no tamanho da tela?
4. Usar window.matchMedia() para determinar a largura da tela para controlar as animações. Em seguida, adicione ou remova ouvintes de eventos conforme necessário. Isto garante que, dependendo do tamanho da tela, apenas a animação relevante será reproduzida.
5. Qual é a melhor maneira de otimizar animações de rolagem?
6. Ao reduzir o número de operações realizadas dentro do evento scroll, window.onscroll pode ser usado de forma mais eficaz na otimização da animação de rolagem. Quando um scroll é detectado, só então a lógica de animação necessária é executada.
7. Como faço para lidar com múltiplas animações em JavaScript?
8. Várias animações podem ser gerenciadas dividindo-as em diferentes condições e ouvintes de eventos. Isto diminui a possibilidade de conflitos porque cada animação funciona separadamente.
9. O que faz prevScrollpos e currentScrollPos fazer em uma animação de rolagem?
10. Essas variáveis ​​monitoram onde o usuário está rolando. A posição de rolagem anterior é armazenada em prevScrollpos, e a posição de rolagem atual é armazenada em currentScrollPos. É possível saber se o usuário está rolando para cima ou para baixo comparando-os.

Considerações finais sobre animações baseadas em consulta de mídia

Concluindo, a criação de um site responsivo requer o gerenciamento de animações JavaScript para diversos dispositivos. Os desenvolvedores podem fornecer uma experiência de usuário ideal acionando animações específicas com base na largura da tela por meio do uso de ferramentas como janela.matchMedia().

Quando implementados corretamente, os sites podem melhorar seu comportamento visual e desempenho em vários dispositivos. Uma maneira de fazer isso é aplicar animações de rolagem seletivamente e isolá-las. Este método garante transições perfeitas entre animações de desktop e dispositivos móveis e ajuda a evitar conflitos de script.