Premessa
Il logo del sito era un semplice SVG statico in cima alla pagina. Funzionale, ma silenzioso. Mi sono chiesto se potevo dargli un piccolo segno di vita senza appesantire la pagina, senza JavaScript e senza toccare il file del logo. La risposta e’ si: con un po’ di CSS il logo ora vive dentro una cornice a pillola con un anello di colore che ruota lentamente, negli stessi colori del brand.
Racconto come ci sono arrivato, perche’ alcune scelte erano obbligate e cosa serve sapere prima di provarci sul proprio sito.
SVG come immagine o inline: cosa cambia
La prima cosa da capire e’ come il logo finisce nella pagina, perche’ decide cosa puoi animare. Ci sono due modi. Se il logo e’ un SVG inserito dentro un tag immagine (il caso classico del logo del tema), dall’esterno puoi animare solo il blocco intero: scala, rotazione, ombra, cornice, e il colore tramite filtri. Se invece il codice dell’SVG e’ scritto direttamente nella pagina (inline), puoi raggiungere ogni singola forma interna e animare anche il disegno, ad esempio facendo comparire i tratti uno a uno.
Il mio logo era nel primo caso, un SVG dentro un tag immagine. Niente morphing delle forme, quindi, ma tutto lo spazio per lavorare su cornice, movimento e colore. Per l’effetto che avevo in mente bastava e avanzava.
L’anello che ruota: conic-gradient e una variabile animabile
Qui sta il cuore dell’effetto. L’idea e’ mettere dietro al logo un gradiente conico, cioe’ un ventaglio di colori che gira intorno a un punto, e farlo ruotare di continuo. Il logo vero e proprio resta al centro con lo sfondo del tema, cosi’ il gradiente si vede solo come un anello colorato sul bordo.
Il problema e’ che, fino a poco tempo fa, l’angolo di un gradiente non era animabile in CSS. La soluzione e’ dichiarare l’angolo come una proprieta’ personalizzata tipizzata, con la regola property: in questo modo il browser sa che e’ un angolo e puo’ interpolarlo in modo fluido in un’animazione.
@property --dm-logo-angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.site-logo {
padding: 4px;
border-radius: 9999px;
background: conic-gradient(from var(--dm-logo-angle),
#17e6e6, #FF5722, #17e6e6, #FF5722, #17e6e6);
animation: dm-logo-spin 4s linear infinite;
}
@keyframes dm-logo-spin {
to { --dm-logo-angle: 360deg; }
}Il padding di 4 pixel sul contenitore esterno e’ lo spessore dell’anello: e’ lo spazio tra il bordo del gradiente e l’immagine al centro. L’animazione fa solo una cosa, portare l’angolo da 0 a 360 gradi in quattro secondi, all’infinito. Alzando quel valore il giro diventa piu’ lento e discreto.
Lo stesso effetto sul logo sticky
Il sito ha una barra di navigazione che resta fissa in alto quando si scorre, con una sua copia del logo. E’ un elemento diverso da quello dell’header, con un contenitore proprio, quindi il CSS dell’header non lo raggiungeva. Ho replicato lo stesso anello sul logo della barra sticky, facendo attenzione a non toccare la regola che lo mostra e nasconde durante lo scroll.
Accessibilita’ e browser vecchi
Un’animazione che gira in continuazione puo’ dare fastidio a chi e’ sensibile al movimento. Per questo l’effetto rispetta la preferenza di sistema che chiede di ridurre le animazioni: chi la imposta vede il logo fermo dentro la sua cornice.
@media (prefers-reduced-motion: reduce) {
.site-logo { animation: none; }
}Sui browser molto vecchi che non capiscono la regola property o il gradiente conico, l’effetto degrada in modo pulito: il logo resta semplicemente fermo nella cornice, senza errori e senza pagine rotte.
Dove mettere il codice
Tutto l’effetto vive in un unico posto: il CSS aggiuntivo del personalizzatore di WordPress. Nessun file del tema modificato, nessun plugin, nessuna riga di PHP. Per il logo di un sito personale, cosi’ legato al tema e ai suoi colori, questa e’ la scelta piu’ semplice e reversibile: se non convince, si cancella il blocco e si torna indietro in un istante.
Un piccolo dettaglio che fa una differenza sorprendente: il logo non e’ piu’ un elemento muto in un angolo, ma qualcosa che si muove appena, abbastanza da farsi notare senza disturbare. E tutto con poche righe di CSS.
Per maggiori informazioni contattami: info@davidemugnaini.it.