Как приостановить или продолжить анимацию страницы при переходе на другую вкладку в браузере?

Question

Я не пишу код, поэтому прошу помощи :-) Привет, у меня проблема с анимацией страницы с парой взаимодействий. Как вставить фрагмент кода, чтобы браузер мог либо продолжить, либо приостановить анимацию, когда пользователь открывает / щелкает другую вкладку.

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

Какой самый простой / простой способ сделать это? Может кто-нибудь поделиться полным / полным фрагментом кода для выполнения sh этого? Я искал часы и не могу найти правильное решение.

Я использую Webflow для сайта. Спасибо большое.

Answer 1

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

Вы, вероятно, хотите прослушивать события 'focus' и 'blur'. JavaScript:

    window.addEventListener('blur', function (evt) {
      // turn off your animation here
    });

    window.addEventListener('focus', function (evt) {
      // turn on your animation here
    });

Документация на событие размытия окна , событие фокусировки окна , addEventListener () .

У меня есть простая страница, которая сообщает обо всех событиях окна, это может быть полезно:

https://terrymorse.com/coding/windowevents/index.html