Quiero reemplazar la animación de bienvenida de Discourse con la animación Pulse. (por favor, comprueba la animación en codepen)
¿Cómo debería hacerlo?
No lo sé, pero me gustaría plantear otro punto: si un usuario ve una animación de bienvenida, hay problemas más importantes que cómo se ve. Y cuando el googlebot lo ve y da puntuaciones un poco mejores, no le importa cómo se ve 
Mi punto es
- cómo cambiar la animación no es importante
- solucionar todos los problemas por los que Discourse responde tan lentamente es algo que debería arreglarse (principalmente a nivel de servidor) y la solución en ese eje podría necesitar algo de apoyo
No he visto ninguna bienvenida después de… las últimas dos actualizaciones/mejoras. Eso significa que Disourse es ahora más rápido que antes.
1 me gusta
El problema real no es el problema del servidor ni nada parecido. Soy de Sri Lanka. Estos días estamos en una crisis económica masiva. Debido a la crisis económica, las autoridades están implementando cortes de energía porque no pueden gestionar las centrales eléctricas de combustible. Debido a estos cortes de energía, las compañías de telecomunicaciones han degradado la velocidad de sus servicios de Internet para ahorrar el consumo de energía de sus baterías. Por lo tanto, nuestra velocidad de Internet es demasiado baja estos días.
5 Me gusta
Bueno, la situación en Sri Lanka es realmente mala, tu caso es una excepción, si/cuando tu público principal también es de Sri Lanka.
Espero que alguien pueda guiarte en la dirección correcta. Pero hasta donde sé, no se puede cambiar fácilmente, sin embargo.
4 Me gusta
Gracias, colega. Veamos cómo hacerlo.
1 me gusta
No creo que sea posible editar desde un tema, porque implicaría editar un archivo erb; este en concreto: discourse/app/views/common/_discourse_splash.html.erb at main · discourse/discourse · GitHub
Dado que la pantalla de bienvenida se carga antes de gran parte de la aplicación Discourse, sospecho que sería bastante complicado hacer que esto sea personalizable. ¿Es eso correcto, @Johani?
5 Me gusta
Es correcto 
La pantalla de presentación se carga antes que cualquier JS/CSS principal. La implementación actual no se centra en la personalización, pero la v2 sí lo hará. El plan es servir la imagen de presentación desde localStorage para un rendimiento ligeramente mejorado y, dado que permite a los administradores establecer algo personalizado a través de una etiqueta \u003cscript\u003e en línea en el campo head_tag del tema.
Actualmente no hay una fecha estimada para este trabajo, y necesita un poco de prueba, pero está planeado.
4 Me gusta
No puedes editar directamente la plantilla de pantalla de presentación ERB de un tema, y dado que la pantalla de presentación se carga antes que el CSS/JS principal, la personalización es complicada.
El CSS que escribes en las pestañas normales de CSS/SCSS del tema se compila y se carga solo después de que se muestra el cargador de la pantalla de presentación. Por lo tanto, incluso si tu CSS funciona allí, los puntos originales aparecen brevemente al cargar.
Dicho esto, puedes anular la animación de la pantalla de presentación insertando CSS en línea dentro de la etiqueta head_tag del tema. Esto asegura que tus estilos se apliquen de inmediato, evitando el parpadeo de los puntos predeterminados.
Aquí tienes un ejemplo que reemplaza la animación de puntos predeterminada con un efecto Pulser similar al de tu 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: el navegador no puede analizar SCSS dentro de una etiqueta <style>. Por lo tanto, no puedes simplemente poner SCSS en línea. Debes usar CSS en lugar de SCSS.
El resultado:
Necesitas crear un nuevo componente de tema, hacer clic en Editar Código, ingresar la etiqueta Head y pegar el bloque <style> anterior.
Guarda y actualiza tu sitio con una recarga forzada para ver la animación de pulso actualizada inmediatamente en la pantalla de presentación.
Esta es una solución ingeniosa hasta que Discourse implemente pantallas de presentación más personalizables en la actualización planificada v2.
5 Me gusta