Como alterar a animação de splash do Discourse?

Suporte
9

Você não pode editar diretamente o template ERB de splash de um tema, e como o splash carrega antes do CSS/JS principal, a personalização é complicada.

O CSS que você escreve nas abas normais de CSS/SCSS do tema é compilado e carregado somente depois que o loader de splash é exibido. Portanto, mesmo que seu CSS funcione lá, os pontos originais aparecem brevemente ao carregar.

Dito isso, você pode substituir a animação de splash injetando CSS inline dentro da tag head_tag do tema. Isso garante que seus estilos sejam aplicados imediatamente, evitando o piscar dos pontos padrão.

Aqui está um exemplo que substitui a animação de pontos padrão por um efeito Pulser semelhante ao do seu Codepen:

<style>
  :root {
    --pulser-color-1: #ffcc00;
    --pulser-color-2: #ff6347;
  }
  #d-splash .dots {
    all: unset;
    position: absolute;
    width: 1.6em;
    height: 1.6em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #d-splash .dots[style*="--n:-2"] { transform: translate(-300%, -50%); }
  #d-splash .dots[style*="--n:-1"] { transform: translate(-150%, -50%); }
  #d-splash .dots[style*="--n:0"]  { transform: translate(0%, -50%); }
  #d-splash .dots[style*="--n:1"]  { transform: translate(150%, -50%); }
  #d-splash .dots[style*="--n:2"]  { transform: translate(300%, -50%); }
  #d-splash .dots::before,
  #d-splash .dots::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--pulser-color-1);
    top: 0;
    left: 0;
    opacity: 0;
    animation: pulse 1s ease-out infinite;
  }
  #d-splash .dots::before {
    border-color: var(--pulser-color-2);
    animation-delay: 0.3s;
  }
  @keyframes pulse {
    0% {
      transform: scale(0.5);
      opacity: 0.6;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.3;
    }
    100% {
      transform: scale(1.8);
      opacity: 0;
    }
  }
</style>

Nota: o navegador não pode interpretar SCSS dentro de uma tag <style>. Portanto, você não pode simplesmente colocar SCSS inline. Você deve usar CSS em vez de SCSS.

O resultado:

pulsereffect

Você precisa criar um novo componente de tema, clicar em Editar Código, entrar na tag Head e colar o bloco <style> acima.

Salve e atualize seu site com um recarregamento forçado para ver a animação de pulso atualizada imediatamente no splash.

Esta é uma solução alternativa interessante até que o Discourse implemente telas de splash mais personalizáveis na atualização planejada v2.

5 curtidas