Quero substituir a animação de introdução do Discourse pela animação Pulse. (por favor, verifique a animação em codepen)
Como devo fazer isso?
Não sei, mas gostaria de levantar outro ponto: se um usuário vê uma animação de “splash”, há questões maiores do que a aparência. E quando o Googlebot a vê e dá notas um pouco melhores, não se importa com a aparência 
Meu ponto é:
- como mudar a animação não é importante
- corrigir todos os problemas pelos quais o Discourse responde tão lentamente é algo que deveria ser corrigido (principalmente no nível do servidor) e a solução para isso pode precisar de algum suporte
Não vi mais animações de “splash” após… as duas últimas atualizações/upgrades. Isso significa que o Discourse está mais rápido do que antes.
1 curtida
O problema real não é o problema do servidor ou outra coisa. Sou do Sri Lanka. Estes dias estamos em uma crise econômica massiva. Devido à crise econômica, as autoridades estão iniciando cortes de energia porque não conseguem gerenciar usinas de energia a combustível. Devido a esses cortes de energia, as empresas de telecomunicações degradaram a velocidade de seus serviços de internet para economizar o consumo de energia de suas baterias. Portanto, nossa velocidade de internet está muito baixa nos dias de hoje.
5 curtidas
Bem, a situação no Sri Lanka é realmente ruim, seu caso é uma exceção, se/quando seu público principal também for do Sri Lanka.
Espero que alguém possa guiá-lo na direção certa. Mas, até onde sei, não pode ser alterado facilmente, embora.
4 curtidas
Obrigado, amigo. Vamos ver como fazer isso.
1 curtida
Não acho que seja possível editar a partir de um tema, pois isso envolveria a edição de um arquivo erb; especificamente este: discourse/app/views/common/_discourse_splash.html.erb at main · discourse/discourse · GitHub
Como a tela de splash carrega antes de grande parte do aplicativo Discourse, suspeito que seria bastante complicado torná-la personalizável? @Johani isso está correto?
5 curtidas
Correto 
O splash carrega antes de qualquer JS/CSS principal. A implementação atual não foca na personalização, mas a v2 o fará. O plano é servir a imagem splash do localStorage para um desempenho ligeiramente maior e, como permite que os administradores definam algo personalizado por meio de uma tag \u003cscript\u003e inline no campo head_tag do tema.
Atualmente, não há um prazo para este trabalho, e ele precisa de um pouco de teste, mas está planejado.
4 curtidas
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:
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