Come cambiare l'animazione di avvio di Discourse?

Supporto
9

Non è possibile modificare direttamente il template ERB dello splash da un tema, e poiché lo splash viene caricato prima del CSS/JS principale, la personalizzazione è complicata.

Il CSS che scrivi nelle normali schede CSS/SCSS del tema viene compilato e caricato solo dopo che viene visualizzato il caricatore splash. Quindi, anche se il tuo CSS funziona lì, i puntini originali appaiono brevemente al caricamento.

Detto questo, puoi sovrascrivere l’animazione splash iniettando CSS inline all’interno del head_tag del tema. Ciò garantisce che i tuoi stili vengano applicati immediatamente, evitando lo sfarfallio dei puntini predefiniti.

Ecco un esempio che sostituisce l’animazione predefinita dei puntini con un effetto Pulser simile a quello nel tuo 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: il browser non può interpretare SCSS all’interno di un tag <style>. Quindi non puoi semplicemente inserire SCSS inline. Devi usare CSS invece di SCSS.

Il risultato:

pulsereffect

Devi creare un nuovo componente tema, fare clic su Modifica codice, inserire il tag Head e incollare il blocco <style> sopra.

Salva e aggiorna il tuo sito con un ricaricamento forzato per vedere immediatamente la nuova animazione pulse allo splash.

Questa è una soluzione intelligente fino a quando Discourse non implementerà schermate splash più personalizzabili nell’aggiornamento pianificato v2.

5 Mi Piace