Personalizzare la schermata di avvio di Discourse con immagini SVG personalizzate

Annunci
13

Si noti che c’è una leggera modifica in ciò che stiamo consentendo per l’animazione SVG (e ho aggiornato l’OP per rifletterlo). Inizialmente stavamo consentendo le animazioni SMIL negli SVG, ma si scopre che queste hanno dei singhiozzi perché il browser mette in pausa questo tipo di animazione mentre viene eseguito javascript.

Quindi, invece, la raccomandazione è di utilizzare solo animazioni di trasformazione CSS e opacità nei tuoi SVG, poiché queste non sono bloccate da JS.

Se dai un’occhiata all’SVG di @ばこん sopra… fornisce un buon esempio di un’animazione consentita:

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

Fai anche attenzione a dare alle tue animazioni nomi univoci in modo che non entrino in conflitto con altre animazioni in Discourse (nomi come “blink”, “rotate”, “fade” ecc. potrebbero essere troppo generici). Usare un prefisso come unique- è un ottimo modo per evitarlo.

4 Mi Piace