Как в гугл хром отключить анимацию
В следующий раз, когда вы создадите очередные анимации на основе CSS3, вам может быть полезно перейти в инструменты разработчика Chrome и воспользоваться преимуществами функций проверки и настройки анимации. В этой краткой статье мы расскажем вам о том, какие инструменты анимационной разработки доступны в Chrome, как получить к ним доступ и чем они могут вам помочь.
Если вы хотите протестировать ваши CSS3 анимации с помощью этих инструментов то можете воспользоваться готовым кодом из нашего курса: 10 Проектов CSS3: интерфейс и макет.
Открытие вкладки Animations
На странице с запущенной CSS3 анимацией сначала откройте «Инструменты разработчика Chrome», перейдя в View > Developer > Developer tools. В качестве альтернативы вы можете использовать сочетание клавиш: F12 или CTRL + SHIFT + I.
Когда инструменты разработчика открыты, перейдите в меню, обозначенное тремя вертикальными точками в верхнем правом углу, затем выберите More tools > Animations, как показано ниже:
Чтобы панель считала информацию о ваших анимациях, обновите страницу, и вы увидите следующее:
Значок маленькой цветной иконки в левом верхнем углу представляет собой анимацию элементов вашей страницы. Нажмите на этот значок, чтобы открыть инструменты проверки анимации:
Курсор воспроизведения и ключевые кадры
По мере воспроизведения анимации вы увидите красный курсор воспроизведения, перемещающийся по временной шкале. Этот курсор может быть передвинут в нужное место при помощи мышки.
Каждая строка интерфейса представляет собой отдельный элемент анимации на странице. Вы можете заметить, что каждая строка имеет участок с более темным насыщенным цветом. Он показывает длину анимации, а более светлые сегменты, которые следуют за ним, представляют собой повтор анимации.
Вы также увидите несколько небольших кругов вдоль каждой линии анимации. Они соответствуют ключевым кадрам анимации. Круги темного цвета представляют начало и конец анимации, а полые круги представляют промежуточные ключевые кадры между ними.
Промежуточные ключевые кадры
Промежуточные ключевые кадры (ключевые кадры между началом и концом каждого цикла анимации) в каждой строке можно перетащить в разные позиции, и по мере их перемещения вы увидите, как меняется время анимации в окне браузера. Это хороший инструмент для экспериментов с тем, какой процент должен приходится на каждый промежуточный ключевой кадр.
Однако сложность заключается в том, что вы не увидите обновления кода на вкладке «Стили» во время проведения этих экспериментов. Вместо этого, когда вы получаете свои промежуточные ключевые кадры, размещенные в правильной точке, вы можете вручную определить, какое процентное значение нужно использовать для ключевого кадра.
Разместите курсор воспроизведения непосредственно над ключевым кадром, о котором идет речь, и вы увидите отметку времени в левом верхнем углу панели, сообщающую вам, как далеко по анимации вы находитесь в секундах. Затем вы можете выяснить, какой процент на этот раз составляет общая продолжительность анимации. В приведенном ниже примере курсор воспроизведения находится примерно на 1 секунде 2-х секундной анимации, поэтому мы знаем, что этот ключевой кадр составляет 50%.
Задержка и продолжительность анимации
Вы можете внести другие изменения на вкладке Animations, которые будут обновлять ваш код на вкладке Styles, чтобы вы могли точно видеть, какие значения вносить в ваш CSS. Первой из них это задержка до начала проигрывания анимации, а вторая — ее длительности.
Чтобы применить задержку перед началом проигрывания анимации, наведите указатель мыши на ее линию, пока не увидите курсор в форме руки, а затем перетащите его горизонтально. Вы увидите обновление значения задержки на вкладке Styles:
Чтобы изменить продолжительность анимации, наведите курсор на свой последний ключевой кадр, пока не увидите двунаправленный курсор, а затем перетащите его горизонтально. Опять же, значение будет видно обновление на вкладке Styles.
Функция тайминга анимации
Вы также можете использовать инструменты разработчика Chrome для изменения кривой скорости, которая управляет временем анимации. Начните с проверки элемента, к которому применяется анимация. Слева от указанной в данный момент функции тайминга вы увидите небольшую иконку с «тильдой». Нажмите на нее, чтобы открыть редактор кривых безье:
Откроется окно, показывающее кривую Безье, которая отображает текущую функцию тайминга. Здесь вы можете выбрать существующий пресет, щелкнув одну из миниатюр слева, или вы можете перетаскивать маркеры основного изображения кривой, чтобы создать пользовательское значение кривых безье, которое вы затем можете скопировать в свой CSS:
По мере изменения, вы увидите маленький фиолетовый шарик, двигающийся слева направо в верхней части редактора, отображающий текущие изменения вашей тайминг функции.
Визуализация вращающихся слоев
Еще одна полезная функция — возможность визуализировать слои, используемые в вашей анимации, включая возможность поворота указанной визуализации и просмотр ее с разных точек зрения, чтобы лучше понять, как все работает.
Чтобы открыть панель Layers, перейдите в меню «Инструменты Chrome Dev» и выберите More tools > Layers.
Когда вкладка Layers открыта, выберите инструмент Rotate mode в верхнем левом углу:
Теперь вы можете использовать этот инструмент для поворота визуализации слоев на любой угол, который вам нужен, чтобы лучше видеть, как работают части вашей анимации:
К сожалению, Chrome не имеет встроенных настроек для управления гифками. К счастью, для этого браузера существует столько разнообразных расширений, что я без труда смог найти подходящее для решения этой проблемы. Выпущенное, кстати, компанией Google.
После установки этого расширения в панели инструментов браузера появится новая кнопка. Вам необходимо просто щёлкнуть по ней и выбрать в меню один из режимов воспроизведения анимации. Доступны три варианта: обычное воспроизведение, однократное воспроизведение и отображение статичной картинки.
Mozilla Firefox
При создании браузера Mozilla Firefox разработчики заранее позаботились о наличии соответствующих настроек. Для доступа к ним вам нужно будет совершить следующие действия:
- Введите в адресную строку браузера about:config.
- Ознакомьтесь с предупреждением и нажмите кнопку «Далее».
- Введите в строку поиска image.animation.
- Перед вами появится параметр image.animation_mode. По умолчанию он имеет значение normal, что означает беспрерывное проигрывание анимации по кругу. Вы можете изменить этот параметр на none или once. В первом случае анимация будет отключена, а во втором будет воспроизводиться только один раз.
- Закройте страницу настроек и перезагрузите браузер.
Если же вам недостаточно имеющихся в браузере возможностей, то можно прибегнуть к услугам стороннего расширения. Toggle animated GIFs умеет воспроизводить гифки по клику мышкой, ставить их на паузу и выполнять некоторые другие трюки.
Internet Explorer
C трудом могу представить, кто из наших читателей пользуется этим браузером, но допускаю, что где-то есть такой человек.
Так вот, хочу тебе сообщить, дорогой друг, что в твоём замечательном браузере тоже имеется возможность избавиться от анимированных картинок. Всё как у взрослых.
Для доступа к этой опции понадобится открыть окно «Свойства обозревателя», а затем переключиться на вкладку «Дополнительно». Здесь в разделе «Мультимедиа» следует снять флажок возле строки «Воспроизводить анимацию на веб-страницах». Для сохранения настроек необходимо перезапустить не только браузер, но и весь компьютер.
В браузере Microsoft Edge функция отключения анимации пока отсутствует. Впрочем, можно надеяться, что, благодаря появившейся недавно поддержке расширений, эта проблема в скором времени будет решена.
И спользование анимации — прекрасный способ оживить веб-страницу, сделать её более привлекательной. Увы, некоторые администраторы сайтов, особенно игровой и развлекательной тематики злоупотребляют анимацией, размещая на своих ресурсах гифки, где только возможно. К счастью, существуют очень простые и эффективные способы взять анимацию под свой контроль.
В Mozilla Firefox
Сделать так, чтобы анимация воспроизводилась всего один раз или полностью отключить её, превратив в статическое изображение, в Mozilla Firefox можно собственными силами браузера. Для этого перейдите по внутреннему адресу about:config , ознакомившись с предупреждением о рисках и пообещав быть осторожным, нажмите соответствующую кнопку.
Далее, воспользовавшись поиском, найдите в списке настроек параметр image.animation_mode.
В Firefox этот параметр отвечает за воспроизведение анимации. Он может принимать три значения:
Кликните по строке image.animation_mode два раза мышкой и замените в открывшемся окошке значение по умолчанию на once или none в зависимости от того, какой результат хотите получить. Затем перезапустите браузер.
В Internet Explorer
Если вы предпочитаете этот несколько устаревший в моральном плане обозреватель, перейдите в панель управления и откройте апплет «Свойства браузера». Переключитесь в открывшемся окошке на вкладку «Дополнительно», отыщите в списке настроек опцию «Воспроизводить анимацию на веб-страницах» и снимите галочку в расположенном слева чекбоксе.
Новые настройки вступят в силу после перезапуска браузера .
В Google Chrome
В Chrome встроенных средств управления анимацией нет, поэтому придётся воспользоваться сторонними инструментами. Например, расширением Animation Policy от Google. После установки дополнения на панели инструментов у вас появится значок в виде молнии.
Современные веб-сайты во многом состоят из медиаматериалов, в частности, изображений. Такой формат подачи материала для большинства людей проще для понимания. Но при этом он нагружает интернет-соединение, повышая трату сетевого трафика (хотя не так уж значительно). Но не только в целях его экономии люди время от времени интересуются, как отключить картинки в браузере Chrome. Мы рассмотрим данную процедуру более подробно.
Инструкция
Сначала пойдет речь о наличии такой функции в версии Гугл Хром для стационарных платформ. А сразу после – о мобильных устройствах. Желаем вам приятного прочтения.
Случай №1: ПК
На компьютерах и ноутбуках нужный параметр официально предусмотрен разработчиком. А добраться до него можно следующим образом:
Но если вам не нравится наличие изображений на отдельном ресурсе, то можно не скрывать их повсеместно, а только для него. Чтобы этого добиться, сначала скопируйте ссылку на нежелательный веб-сайт. Затем на странице настроек найдите блок «Блокировать» и кликните на кнопку «Добавить».Потом в единственную графу вставьте скопированную ранее ссылку и вновь нажмите «Добавить».
Эту процедуру можно выполнить и в обратную сторону – заблокировать картинки повсеместно, но включить их отображение на отдельных интернет-страницах.
Если вас достали рекламные баннеры, то не стоит ограничиваться одними настройками системы Google Chrome. Рекомендуем обратить внимание на расширения, специализирующиеся на блокировках рекламного контента. Например, с задачей прекрасно справится плагин AdBlock Plus, который мы рекомендуем к загрузке.Случай №2: Мобильные устройства
А вот на Android и iOS данная функция, к сожалению, отсутствует. Но вы можете активировать функцию «Экономия трафика». Она уменьшает качество медиафайлов, при этом сокращая расход мобильного трафика и ускоряя скорость интернет-серфинга. Инструкция по ее включению изложена в отдельном материале на нашем сайте.
Читайте также: