Брендинг экрана приветствия Discourse с помощью пользовательских SVG-изображений

[awesomerobot (Kris)]

Эта функция была очень востребована здесь, на Meta Personal branding for the splash screen .

Теперь мы добавили возможность добавлять SVG-изображение — статичное или анимированное — в качестве изображения загрузочного экрана, чтобы заменить стандартный индикатор в виде точки загрузки:

Если используется статичный SVG, он отображается поверх анимации точки загрузки:

Если же используется анимированный SVG, он полностью заменяет точки:

Обратите внимание: по соображениям производительности анимированные SVG должны использовать только CSS-анимации трансформации (transform) или прозрачности (opacity). ^[1]

Вы можете включить эту функцию через нашу систему «Предстоящие изменения» (/admin/config/upcoming-changes):

Для этого используется настройка сайта splash screen image. В вашем SVG можно использовать CSS-переменные var(--primary), var(--secondary) и var(--tertiary), чтобы ссылаться на цвета вашей темы и адаптироваться к тёмному режиму.

Важно отметить, что включение этой функции может повлиять на ваш показатель LCP, поэтому лучший способ протестировать её — внести изменения, подождать некоторое время и проверить, повлияло ли это на LCP или индексацию в консоли поиска Google.

---

1. Изначально мы пытались разрешить элементы анимации SMIL (<animate>, <animateTransform> и т.д.), но браузеры приостанавливают такие анимации при выполнении JavaScript, что вызывает задержки. CSS-анимации трансформации и прозрачности не блокируются JS, что позволяет избежать этой проблемы. ↩︎

[philh]

хм-м-м Discourse Logo with Throbber

[eisammy (Sammy)]

Как мне заменить эти точки? У меня появляется только возможность вставить мой логотип в формате SVG

[Don]

Привет

@awesomerobot

Если используется статичный SVG, он отображается поверх анимации точек загрузки, в противном случае, если используется анимированный, он заменяет их:

Таким образом, если вы используете анимированный SVG, он будет заменён.

[ばこん (べーこん(bac0n))]

Я применил SVG-анимацию, но она выглядит очень маленькой.

Есть ли способ увеличить её?

[awesomerobot (Kris)]

В данный момент у нас нет возможности добавлять пользовательские CSS-стили, так как этот экран загружается до того, как будет инициализирована значительная часть приложения, и существует множество ограничений. Не могли бы вы поделиться используемым здесь SVG-изображением (или отправить его мне в личные сообщения)? Я мог бы провести тестирование и проверить, можно ли сделать наши настройки по умолчанию более гибкими.

[ばこん (べーこん(bac0n))]

Вот оно

[awesomerobot (Kris)]

Спасибо за ссылку!

Я вношу изменение, которое позволит использовать чуть большие размеры и лучше центрировать экраны со статичными логотипами: UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

Также я заметил, что в вашем SVG много свободного пространства сверху, что влияет на центрирование. Не уверен, что это сделано намеренно, но в этой версии оно удалено.

[ばこん (べーこん(bac0n))]

Огромное спасибо!

[awesomerobot (Kris)]

Обратите внимание, что в правилах, касающихся анимации SVG, произошло небольшое изменение (я также обновил исходный пост, чтобы отразить это). Изначально мы разрешали анимацию SMIL в SVG, но оказалось, что они подёргиваются, так как браузер приостанавливает анимацию этого типа во время выполнения JavaScript.

Поэтому теперь рекомендуется использовать в SVG только анимацию трансформации (transform) и прозрачности (opacity) через CSS, так как они не блокируются JS.

Если вы посмотрите на SVG от @ばコン выше, то увидите отличный пример допустимой анимации:

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

Также будьте внимательны и давайте своим анимациям уникальные имена, чтобы они не конфликтовали с другими анимациями в Discourse (названия вроде «blink», «rotate», «fade» и т. д. могут быть слишком общими). Использование префикса, например unique-, — отличный способ избежать этого.

[Falco]

Google только что выпустил Gemini Pro 3.1, и их первым акцентом модели стали анимированные SVG. Естественно, я попытался создать загрузчик для https://discourse-on-a-pi5.falco.dev/ и получил это уже после двух запросов.

Отлично сочетается с этой новой функцией!

[Bas (Bas van Leeuwen (OOO until May 25))]

Это невероятно, Falco

Мне нужно посмотреть, что Gemini сможет сделать с логотипом Discourse

[Falco]

Да, я был довольно доволен результатом! Я пробовал это с моделями уже давно, и это первая модель, которая справляется с этим хорошо.

Вот промпт:

Сгенерируй анимированный SVG, который будет использоваться как анимация загрузки на форуме о мини-компьютере Raspberry Pi. Анимация должна быть выполнена с помощью встроенного в SVG CSS.

Это привело к результату:

Затем я написал:

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

Это привело к версии, которую я поделился:

Единственная проблема в том, что в коде SVG много CSS-комментариев, например:

/* Базовая анимация и стили платы */

которые недопустимы при сохранении файла как SVG, поэтому я вручную удалил 7 строк с ними.

[Bas (Bas van Leeuwen (OOO until May 25))]

У тебя получается гораздо лучше, чем у меня.

Я сдался после нескольких итераций, и это лучшее, что у меня вышло

[Редактировать], позвольте добавить ещё два промежуточных состояния:
Это получилось довольно хорошо… кроме того, что логотип был сломан:

Мне показалось, что это самый интересный вариант, но он совершенно не сработал как анимация логотипа (и по непонятной причине был отрендерен как видео со звуком вместо SVG):

---

Извините всех, что увёл тему в сторону Вернёмся к восхищению работой Falco и обсуждению загрузочного экрана!

[Falco]

@Bas

У тебя получается гораздо лучше, чем у меня.

Я сдался после нескольких попыток.

Боюсь, что ограничение в виде логотипа Discourse может быть слишком строгим.

Я попробовал

Создайте анимированный SVG, который будет использоваться как анимация загрузки на форуме для обсуждений. Форум работает на Discourse, поэтому в SVG можно использовать некоторые его мотивы, например, разноцветные пузыри сообщений. Анимация должна быть реализована с помощью встроенных CSS-стилей SVG.

И получил

[Falco]

Давайте устроим конкурс анимированных заставок для Discourse!

[Canapin (Coin-coin le Canapin)]

@Bas

У тебя результаты гораздо лучше, чем у меня.

Ты установил для Gemini режим “pro”? По умолчанию это может быть не так.

[keegan (Keegan George)]

@Falco

Мы должны устроить конкурс на создание анимированного заставки для Discourse!

Попробовал сделать одну в стиле нового брендирования

[noahl (Noah Lovell)]

@Falco

Нам стоит устроить конкурс на создание анимированного логотипа Discourse!

Ну что ж, похоже, я тоже присоединяюсь к этому тренду

Промпт

Преобразуй это в анимированный SVG.

Правила:

• Это должен быть анимированный SVG
• Он будет использоваться как индикатор загрузки между страницами, поэтому должен быть сдержанным и минималистичным.

Идея:

• Я хочу сохранить общую форму без искажений
• Думаю, мы можем что-то сделать с тремя внутренними фигурами — например, заставить их вращаться, как если бы вы крутили ракетку для настольного тенниса за ручку

Вы ОБЯЗАНЫ сохранить идентичность бренда и не нарушать его общий дизайн — это критически важно для бренда.

Результат (после 3 правок):