Поправљање ЈаваСцрипт анимација зависних од медија за прилагодљиве веб странице

Руковање условним анимацијама заснованим на медијским упитима са ЈаваСцрипт-ом

Ово решење обрађује условне анимације зависне од ширине екрана коришћењем ЈаваСцрипт-а у комбинацији са виндов.матцхМедиа функција.

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

Често постављана питања о ЈаваСцрипт анимацијама и медијским упитима

1. Како да користим медијске упите у ЈаваСцрипт-у?
2. ЈаваСцрипт вам омогућава да примените медијске упите са window.matchMedia(). Овај начин можете користити за покретање различитих скрипти на основу ширине екрана.
3. Како да контролишем анимације на основу величине екрана?
4. Користите window.matchMedia() да бисте одредили ширину екрана како бисте контролисали анимације. Затим додајте или уклоните слушаоце догађаја по потреби. Ово гарантује да ће се, у зависности од величине екрана, репродуковати само релевантна анимација.
5. Који је најбољи начин за оптимизацију анимација померања?
6. Смањењем броја операција које се обављају унутар догађаја померања, window.onscroll може се ефикасније користити у оптимизацији анимације померања. Када се детектује скроловање, тек тада се извршава потребна логика анимације.
7. Како да рукујем вишеструким анимацијама у ЈаваСцрипт-у?
8. Вишеструким анимацијама се може управљати тако што ћете их поделити на различите услове и слушаоце догађаја. Ово смањује могућност сукоба јер свака анимација ради засебно.
9. Шта ради prevScrollpos и currentScrollPos радити у анимацији померања?
10. Ове варијабле прате где корисник скролује. Претходни положај померања је сачуван prevScrollpos, а тренутна позиција померања је сачувана currentScrollPos. Упоређујући их, могуће је утврдити да ли корисник скролује нагоре или надоле.

Завршна размишљања о анимацијама заснованим на медијским упитима

У закључку, креирање респонзивне веб странице захтева управљање ЈаваСцрипт анимацијама за различите уређаје. Програмери могу да обезбеде оптимално корисничко искуство покретањем одређених анимација на основу ширине екрана коришћењем алата као што су виндов.матцхМедиа().

Када се правилно имплементирају, веб локације могу побољшати своје визуелно понашање и перформансе на различитим уређајима. Један од начина да се то уради је селективна примена анимација померања и њихово изоловање. Овај метод гарантује беспрекорне прелазе између десктоп и мобилних анимација и помаже у спречавању сукоба скрипти.