Wie ändere ich die Discourse-Splash-Animation?

Unterstützung
9

Sie können die ERB-Splash-Vorlage eines Themes nicht direkt bearbeiten, und da der Splash vor dem Kern-CSS/JS geladen wird, ist die Anpassung schwierig.

Das CSS, das Sie in den normalen CSS/SCSS-Tabs des Themes schreiben, wird kompiliert und erst nachdem der Splash-Loader angezeigt wird, geladen. Selbst wenn Ihr CSS dort funktioniert, erscheinen die ursprünglichen Punkte beim Laden kurz.

Das heißt, Sie können die Splash-Animation überschreiben, indem Sie Inline-CSS in den head_tag des Themes einfügen. Dies stellt sicher, dass Ihre Stile sofort angewendet werden und das Standardflackern der Punkte vermieden wird.

Hier ist ein Beispiel, das die Standard-Punkteanimation durch einen Pulser-Effekt ersetzt, ähnlich dem in Ihrem 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>

Hinweis: Der Browser kann SCSS nicht innerhalb eines <style>-Tags parsen. Sie können also nicht einfach SCSS inline einfügen. Sie müssen stattdessen CSS anstelle von SCSS verwenden.

Das Ergebnis:

pulsereffect

Sie müssen eine neue Theme-Komponente erstellen, auf “Code bearbeiten” klicken, den Head-Tag eingeben und den obigen <style>-Block einfügen.

Speichern Sie und aktualisieren Sie Ihre Website mit einem Hard Reload, um die aktualisierte Pulse-Animation sofort beim Splash zu sehen.

Dies ist eine clevere Problemumgehung, bis Discourse in der geplanten v2-Aktualisierung besser anpassbare Splash-Screens implementiert.

5 „Gefällt mir“