Я тут обнаружил, что есть на яндекс.картах еще место, куда можно разместить пару баннеров.
Товарищи хуяндексовые разработчики! Это недоработка! Требую устранить - немедленно добавьте спама в свободное место!
Невозможно узнать о новинках всякого говна - карта мешает!
Пацаны чтобы хоть как то НОРМАЛЬНО этим пользоваться - я написал код (работает онли в браузере). Скачивайте расширение StyleBot, открываете, снизу плажка "код" и туда вставляете этот код и можно будет хотябы нормально перематывать трек
Вот тутор записал https://www.youtube.com/watch?v=dNzRBC9BVl0
Код:
/* Input */
.PlayerBar_root__cXUnU .ChangeTimecodeBackground_root_isPlayingTrack__2naHL input[type=range]{
height:270px;
transform: translatey(-40px);
}
/* Division */
.PlayerBar_root__cXUnU .PlayerBarDesktopWithBackgroundProgressBar_triggerModal__EVv5d{
visibility:hidden;
}
.TimecodeGroup_timecode__IJXpy {
display: none
}
/* Undefined */
.PlayerBar_root__cXUnU .PlayerBarDesktopWithBackgroundProgressBar_sonata__mGFb_ .undefined{
z-index:2;
}
/* Input */
.WithTopBanner_root__P__x3 .WithTopBanner_content__6Vh7a .DefaultLayout_root__7J0wo .PlayerBar_root__cXUnU .PlayerBarDesktopWithBackgroundProgressBar_playerBar__mp0p9 .ChangeTimecodeBackground_root_isPlayingTrack__2naHL input[type=range]{
transform: translatey(-64px) !important;
}
/* Division */
.PlayerBar_root__cXUnU .PlayerBarDesktopWithBackgroundProgressBar_meta__FhKTC{
transform:translatex(0px) translatey(0px);
}
/* Undefined */
.PlayerBar_root__cXUnU .PlayerBarDesktopWithBackgroundProgressBar_meta__FhKTC .undefined{
z-index:2;
}
/* Division */
.PlayerBar_root__cXUnU .Meta_metaContainer__7i2dp{
z-index:2;
}
/* Division */
.PlayerBar_root__cXUnU .FullscreenPlayerDesktopButton_root__qGgoC{
z-index:2;
}
/* Input */
.WithTopBanner_root__P__x3 .WithTopBanner_content__6Vh7a .DefaultLayout_root__7J0wo .PlayerBar_root__cXUnU .PlayerBarDesktopWithBackgroundProgressBar_playerBar__mp0p9 .ChangeTimecodeBackground_root_isPlayingTrack__2naHL input[type=range]{
transform: translatey(-101px) !important;
}
/* Division */
.PlayerBar_root__cXUnU .PlayerBarDesktopWithBackgroundProgressBar_meta__FhKTC{
z-index:2;
}
/* J9wt kytjowg73q mon5wp */
.PlayerBarDesktopWithBackgroundProgressBar_meta__FhKTC span .J9wTKytjOWG73QMoN5WP{
z-index:2;
}
div.PlayerBarDesktopWithBackgroundProgressBar_meta__FhKTC {
max-height: 1px;
}
div.p2cf5ec0.mffcb4f4b.a17737334 {
display: none;
}
section.SideAdvertBanner_root__hT1jJ.Content_sideBanner__Na07D {
display: none;
}
ЯМ кто вам сказал что исчезающие функциональные и информирующие элементы в интерфейсе - это хорошо?
Видите позицию бегунка песни?
А вот полоска заполняется.
А вот сиди и высматривай где щас бегунок. Не видишь что ли?
Она появляется если навести мышь на эту узкую область.
Какой тут уровень громкости?
Максимальный.
Загоните вашу дизайнерку обратно в подвал.
За кнопку дизлайка - плюс.
Я за то, чтобы все спорные настройки должны быть вынесены в настройки приложения.
Я бы хотел еще регулировать толщину полоски бегунка позиции воспроизведения.
Еще момент. Вот эти элементы лучше делать видимыми при наведении мышки на окно.
Это единственная ситуация когда нужно скрывать часть интерфейса.
Как анимации удерживают внимание пользователя.
Ожидание — одна из самых уязвимых точек пользовательского сценария. Даже доли секунд могут вызвать фрустрацию, если интерфейс не даёт обратной связи. Загрузка — не просто технический процесс. Это пространство между действием и результатом, которое можно использовать грамотно.
Именно поэтому анимированные загрузчики становятся частью продуманного UX: они удерживают внимание, управляют ожиданиями и помогают пользователю не чувствовать потерю контроля.
Обратная связь
Показываем, что система работает. Даже простая анимация вращения — это сигнал: "Процесс идёт".
Представление времени
Индикаторы прогресса — процент, таймер или анимация, передающая ощущение динамики, помогают пользователю оценить, сколько ещё ждать.
Контекст и объяснение
Сообщения вроде «получаем данные» или «обрабатываем файл» добавляют прозрачности и снижают тревожность.
Развлечение и эстетика
Кастомные SVG, микроанимации и забавные визуальные эффекты превращают ожидание в мини-опыт. Это особенно актуально в брендинге.
CSS-анимации не нагружают DOM;
Они легко настраиваются по цвету, размеру и скорости;
Хорошо работают в любом браузере, не требуют дополнительных библиотек;
Плавность на уровне GPU.
Даже базовые эффекты — вращение, пульсация, масштаб — можно реализовать в нескольких строках кода.
Если задача — создать сложную интерактивную анимацию или синхронизировать поведение с логикой приложения, стоит подключить:
SVG-анимации;
WebGL или Canvas;
Библиотеки вроде Lottie, p5.js, Three.js.
Визуальный прогресс — полосы загрузки, индикаторы с процентами, кольца заполнения;
Бесконечные циклы — когда точное время ожидания неизвестно;
Контекстуальные сообщения — объясняем, что происходит;
Персонализированные анимации — брендированные лоадеры усиливают узнаваемость и доверие.
Не блокируйте взаимодействие дольше, чем необходимо;
Не оставляйте пользователя без визуальной или текстовой поддержки;
Синхронизируйте анимацию с реальной производительностью;
Тестируйте загрузчики на разных устройствах и соединениях.
Анимация загрузки — это не декоративная деталь, а точка контакта, где пользователь либо теряет терпение, либо остаётся с вами. Сделайте ожидание частью общего впечатления: понятной, предсказуемой и визуально приятной.
