Исправление медиазависимой анимации JavaScript для адаптивных веб-сайтов

Понимание проблемы условной анимации JavaScript

При использовании адаптивного веб-дизайна часто необходимо учитывать различные варианты поведения для разных типов устройств или размеров экрана. В этой ситуации может быть сложно использовать JavaScript для управления анимацией на основе медиа-запросов. Когда две анимации — по одной для каждого устройства — не работают одновременно должным образом, это обычная проблема.

В этом сценарии используются две анимации JavaScript: одна для «прокрутки навигации» (подходит для больших экранов), а другая для «прокрутки призыва к действию» (призыва к действию), предназначенной для небольших устройств. Сложность заключается в том, чтобы каждая анимация воспроизводилась отдельно в зависимости от ширины экрана, одновременно предотвращая столкновения.

Когда две анимации установлены в разных тегах скрипта и только одна из них работает правильно, возникает проблема. При небрежной реализации их объединение под одним условием или объединение тегов сценария может привести к дальнейшим проблемам, особенно при использовании медиа-запросов, таких как `window.matchMedia()`.

В этом посте будет рассказано, как использовать медиа-условия для организации вашего JavaScript, чтобы каждая анимация работала так, как задумано. Чтобы обеспечить плавный переход между мобильными и большими экранами, особое внимание будет уделяться соответствующим условным операторам и медиа-запросам.

Команда	Пример использования
window.matchMedia()	JavaScript использует эту технику для применения медиа-запросов. На основании размера экрана он определяет, соответствует ли документ данному медиазапросу CSS, и инициирует соответствующие операции JavaScript. Этот скрипт позволяет легче отличить анимацию для больших дисплеев от мобильных.
addEventListener("change", callback)	Эта команда отслеживает изменения статуса медиа-запроса. Функция, предоставленная в качестве обратного вызова, выполняется, когда ширина экрана превышает заранее определенный порог (например, 450 пикселей). Он обеспечивает динамический ответ без необходимости обновления страницы.
removeEventListener("scroll", callback)	Устраняя бессмысленную обработку событий при неправильном размере экрана, эта команда оптимизирует скорость, удаляя прослушиватель событий прокрутки, когда он больше не нужен. При чередовании запросов СМИ это обязательно.
window.pageYOffset	Этот атрибут возвращает количество пикселей, которые были прокручены вверх и вниз в документе. Он используется для определения того, прокручивает ли пользователь вверх или вниз, и для отслеживания положения прокрутки.
element.style.top	Эта команда настраивает свойство CSS top элемента, которое управляет вертикальным положением элемента на странице. Здесь он используется для определения того, где при прокрутке пользователя должна отображаться или скрываться панель навигации.
element.style.left	Эта команда перемещает элементы по горизонтали, регулируя левое свойство CSS, как это делает element.style.top. На мобильных устройствах он используется для отображения и закрытия кнопки призыва к действию.
mediaQuery.matches	Это свойство проверяет, совпадают ли теперь медиа-запрос и документ. Чтобы убедиться, что соответствующая анимация применяется на мобильных устройствах, а не на настольных компьютерах, важно условно запускать соответствующие анимации в зависимости от ширины экрана.
prevScrollpos >prevScrollpos > currentScrollPos	Чтобы определить направление прокрутки (вверх или вниз), это условие проверяет местоположения прокрутки из предыдущей и текущей итераций. Крайне важно определить, как элементы должны реагировать на прокрутку — например, показывая или скрывая кнопки или панели навигации.
onscroll	Встроенный обработчик событий, который запускается при прокрутке пользователем. Сравнивая предыдущую и текущую позиции прокрутки, он выполняет анимацию на основе прокрутки.

Управление анимацией JavaScript в зависимости от размера экрана

Предыдущие примеры сценариев JavaScript были созданы для решения проблемы наличия двух разных анимаций — одной для настольных компьютеров и одной для мобильных устройств. Основная задача — обеспечить, чтобы каждая анимация запускалась только тогда, когда это необходимо, в зависимости от ширины экрана устройства. Для этого используется метод, позволяющий коду идентифицировать случаи, в которых удовлетворяются определенные условия медиа-запроса. Сценарии гарантируют, что каждая анимация работает отдельно в зависимости от размера экрана, используя разные условия для настольных компьютеров (минимальная ширина: 450 пикселей) и мобильных устройств (максимальная ширина: 450 пикселей).

Поведение прокрутки большего экрана для панели навигации обрабатывается в первом скрипте. В зависимости от направления прокрутки Панель либо остается видимой, либо исчезает, когда пользователь прокручивает страницу вверх или вниз. Используя и переменных, это осуществляется путем сравнения предыдущей и текущей позиции прокрутки. Прокрутка вверх приводит к тому, что панель навигации появляется снова, устанавливая ее верхнее положение на 0, а прокрутка вниз приводит к ее исчезновению, перемещая ее из поля зрения с отрицательным верхним значением.

Второй скрипт касается кнопки «призыв к действию» (CTA) на мобильных устройствах. Кнопка CTA отображается на экранах всех размеров, но она анимируется только тогда, когда ширина экрана меньше 450 пикселей. Когда пользователь прокручивает страницу вверх, кнопка выдвигается из левой части экрана; когда они прокручивают вниз, кнопка исчезает из поля зрения. С той же логикой сравнения позиций прокрутки, что и для панели навигации, это поведение сопоставимо. Однако вместо изменения верхнего значения он изменяет левое расположение кнопки, заставляя ее либо появляться, либо исчезать в зависимости от направления прокрутки.

Эти два сценария предназначены для работы отдельно друг от друга. Однако они инкапсулированы в условные выражения, которые проверяют ширину экрана, чтобы предотвратить конфликты. С Медиа-запросы можно использовать непосредственно в JavaScript, что позволяет сценариям динамически переходить между двумя анимациями, не мешая друг другу. Сохраняя посторонние анимации в пределах установленной ширины экрана, этот модульный подход повышает эффективность и гарантирует бесперебойную работу на настольных и мобильных устройствах.

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 для адаптивной анимации

Важнейшим компонентом разработки адаптивных веб-сайтов является обеспечение того, чтобы переходы и анимация по-разному реагировали на устройствах разного размера. Эффективное управление условиями имеет решающее значение при работе с медиа-запросами и JavaScript, особенно когда анимация предназначена для запуска только на экранах определенных размеров. Здесь прослушиватели динамических событий и вступить в игру. С помощью этих инструментов разработчики могут гарантировать, что анимация запускается только при выполнении определенных критериев, что улучшает взаимодействие с пользователем и производительность как на настольных, так и на мобильных платформах.

Обработка множества анимаций, запускаемых одновременно, представляет еще одну трудность для анимаций JavaScript, зависящих от мультимедиа. Разделение функциональности на более управляемые модульные прослушиватели событий может творить чудеса в этой ситуации. Более эффективно разделить различные функции и активировать их на основе конкретных медиа-запросов, а не выполнять все сценарии одновременно. Это гарантирует, что каждый скрипт работает должным образом на соответствующем устройстве, и помогает снизить ненужную нагрузку на браузер.

Оптимизация производительности для мобильных устройств особенно важна при работе с адаптивной анимацией. Поскольку мобильные устройства часто имеют более низкую вычислительную мощность, чем настольные компьютеры, производительность мобильных устройств можно повысить за счет уменьшения сложности сценариев. Этот пример использования Обработчик событий эффективно гарантирует плавную работу анимации, специфичной для мобильных устройств, такой как «прокрутка CTA», без нагрузки на ресурсы устройства. Кроме того, это гарантирует, что более крупные устройства загружают анимацию только пропорционально размеру экрана.

1. Как использовать медиа-запросы в JavaScript?
2. JavaScript позволяет применять медиа-запросы с помощью . Вы можете использовать этот способ для запуска разных сценариев в зависимости от ширины экрана.
3. Как управлять анимацией в зависимости от размера экрана?
4. Использовать для определения ширины экрана для управления анимацией. Затем при необходимости добавьте или удалите прослушиватели событий. Это гарантирует, что в зависимости от размера экрана будет воспроизводиться только соответствующая анимация.
5. Как лучше всего оптимизировать анимацию прокрутки?
6. Уменьшив количество операций, выполняемых внутри события прокрутки, может более эффективно использоваться при оптимизации анимации прокрутки. Только при обнаружении прокрутки выполняется требуемая логика анимации.
7. Как обрабатывать несколько анимаций в JavaScript?
8. Множественными анимациями можно управлять, разделив их на разные условия и прослушиватели событий. Это снижает вероятность конфликтов, поскольку каждая анимация работает отдельно.
9. Что значит и делать в анимации прокрутки?
10. Эти переменные отслеживают, где пользователь прокручивает страницу. Предыдущая позиция прокрутки сохраняется в , а текущая позиция прокрутки сохраняется в . Сравнивая их, можно определить, прокручивает ли пользователь вверх или вниз.

В заключение, создание адаптивного веб-сайта требует управления анимацией JavaScript для различных устройств. Разработчики могут обеспечить оптимальное взаимодействие с пользователем, запуская определенные анимации в зависимости от ширины экрана с помощью таких инструментов, как .

При правильной реализации веб-сайты могут улучшить свое визуальное поведение и производительность на различных устройствах. Один из способов сделать это — выборочно применять анимацию прокрутки и изолировать ее. Этот метод гарантирует плавный переход между анимацией на рабочем столе и на мобильных устройствах и помогает предотвратить конфликты сценариев.