Le animazioni possono essere una caratteristica accattivante e visivamente interessante per le tue pagine web. Tuttavia, la creazione di animazioni con Flash o JavaScript consumerà una parte significativa delle risorse del tuo sito.
Fortunatamente, puoi aggiungere animazioni al tuo sito Web WordPress con Cascading Style Sheets (CSS). Questo linguaggio di codifica ti consente di incorporare animazioni illimitate sul tuo sito, ma è ancora relativamente accessibile e facile da imparare.
In questo articolo, discuteremo di come funzionano le animazioni CSS e di come aggiungerle al tuo sito web con e senza plugin.
Come funzionano le animazioni CSS? (E perché dovresti usarli)
CSS3 offre agli utenti l’opportunità di creare animazioni modificando lo stile di un elemento (ad esempio, un’immagine o un pulsante) nel tempo. Puoi modificare tutte le proprietà CSS dell’elemento che desideri, tutte le volte che vuoi.
A differenza di Javascript o Flash, le animazioni CSS evitano problemi di compatibilità del browser e codifiche complicate. Ciò consente di attirare l’attenzione su caratteristiche importanti senza effetti collaterali negativi come la riduzione delle prestazioni .
Aggiunta di animazioni CSS con un plugin
Se non sei sicuro delle tue capacità di programmazione, ti abbiamo coperto. Puoi creare facilmente animazioni CSS con un plug-in.
Passaggio 1: installa e attiva un plug-in di animazione CSS
Per iniziare, dovrai installare un plug-in di animazione CSS. Stiamo usando Blocks Animation: CSS Animations for Gutenberg Blocks , uno strumento relativamente nuovo creato appositamente per l’Editor blocchi.
Puoi trovare questo plug-in accedendo a Plugin> Aggiungi nuovo nella dashboard di WordPress. Una volta individuato, fai clic su Installa ora e quindi su Attiva :
Al termine dell’attivazione, vai al post o alla pagina in cui desideri includere l’animazione.
Passaggio 2: progetta la tua animazione
Quindi, fai clic sull’elemento che desideri animare. Nella scheda Blocco della barra laterale, cerca la sezione denominata Animazione , che è stata aggiunta quando abbiamo attivato il plug-in nel passaggio 1 . Qui vedrai un menu a discesa che elenca diversi effetti diversi:
Puoi giocare con tutte le opzioni di animazione che desideri per trovare quella che si adatta ai tuoi contenuti.
Passaggio 3: personalizza ritardo e velocità
Il plug-in Blocks Animation include anche opzioni per personalizzare il ritardo e la velocità dell’animazione :
La prima di queste due impostazioni posticipa l’inizio dell’animazione. Ciò può aiutare ad attirare l’attenzione sul tuo elemento dopo che la pagina è stata caricata o consentirti di utilizzare le animazioni in combinazione, come dimostreremo a breve. È possibile impostare il ritardo fino a cinque secondi.
Utilizzando il menu a discesa della velocità, puoi rendere la tua animazione lenta, più lenta, veloce o più veloce . Un’animazione più lenta può essere più sottile e meno fastidiosa per i visitatori, mentre un’animazione più veloce farà di più per attirare la loro attenzione.
Passaggio 4: salva e visualizza l’anteprima dell’animazione
Ti consigliamo di salvare il tuo post o la tua pagina come bozza e visualizzare in anteprima le tue animazioni prima di pubblicarle. Sebbene le animazioni possano rivelarsi molto utili, hanno anche il potenziale per distrarre e far sembrare le tue pagine disordinate.
Visualizzare l’anteprima della pagina e mantenere le animazioni relativamente semplici eviterà questi risultati indesiderati. Di seguito, puoi vedere il nostro esempio finito, che accoppia un’immagine animata con il pulsante che abbiamo disegnato nei passaggi precedenti:
Nel caso in cui trovi che la tua animazione non si adatta al resto del tuo contenuto o ha l’effetto desiderato, puoi semplicemente tornare all’Editor blocchi e regolarlo. Questo è il bello dell’utilizzo di un plug-in di animazione CSS: è semplice e veloce.
Aggiunta di animazioni CSS senza plug-in
Se sei a tuo agio a modificare i file del tuo tema, puoi creare manualmente animazioni personalizzate senza plug-in. Ci vuole un po ‘di know-how di codifica, quindi questa soluzione può essere lasciata a chi ha esperienza di sviluppo.
Prima di iniziare, assicurati di eseguire il backup del tuo sito . È anche saggio utilizzare un tema figlio , in modo da poter ripristinare facilmente i file predefiniti del tema se ne senti la necessità.
Passaggio 1: comprendere le proprietà CSS coinvolte
Prima di eseguire effettivamente qualsiasi modifica, ci sono otto proprietà importanti da tenere a mente quando si creano animazioni CSS:
- @keyframes: specifica gli stili che verranno applicati all’elemento tramite l’animazione.
- nome-animazione: crea un nome che puoi utilizzare per fare riferimento all’animazione altrove nel codice.
- durata-animazione: definisce per quanto tempo deve essere eseguita l’animazione.
- ritardo dell’animazione: indica quanto tempo deve attendere un’animazione per iniziare una volta caricata la pagina.
- conteggio-iterazione-animazione: rileva quante volte deve essere eseguita l’animazione.
- animations-direction: indica in quale direzione deve essere eseguita l’animazione.
- animation-timing-function: Determina la curva di velocità dell’animazione.
- animation-fill-mode: specifica uno stile per l’elemento quando l’animazione non è in riproduzione.
- animation: una proprietà abbreviata per associare i fotogrammi chiave agli elementi.
La più importante di queste proprietà da comprendere è il “fotogramma chiave”. Questo termine deriva da processi di animazione disegnati a mano, in cui il fotogramma principale era chiamato fotogramma chiave e altri erano disegnati per entrare o uscire da esso.
Nell’animazione CSS, il fotogramma chiave specifica cosa sta succedendo e quando. Prendi questo , ad esempio:
@keyframes esempio {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
Il fotogramma chiave sopra indica che il 25 percento dell’animazione, il colore di sfondo dell’elemento specificato cambierà da rosso a giallo. Le percentuali vengono generalmente utilizzate per definire il tempo dell’animazione. Tuttavia, da e a possono essere utilizzati al posto di 0% e 100%, rispettivamente.
Passaggio 2: crea il tuo file animate.css
Per aggiungere animazioni CSS, dovrai creare un file nel tuo editor di testo preferito utilizzando le proprietà sopra. Dovrebbe includere i fotogrammi chiave per tutte le animazioni che desideri utilizzare. Quindi li legherai a classi CSS specifiche in modo da poterli applicare agli elementi del tuo sito.
Ecco un esempio. Nel codice seguente , creiamo prima un fotogramma chiave utilizzando le proprietà di trasformazione e visibilità , che ci consentiranno di far scorrere un elemento dal lato destro dello schermo:
@keyframes slideInRight {
a partire dal {
-webkit-transform: translate3d (100%, 0, 0);
trasformare: translate3d (100%, 0, 0);
visibilità: visibile;
}
per {
-webkit-transform: translate3d (0, 0, 0);
trasformare: translate3d (0, 0, 0);
}
}
Dobbiamo quindi associare quel fotogramma chiave a una classe CSS. In questo caso, è stato denominato slideInRight. Questo codice verrà inserito direttamente dopo il fotogramma chiave sopra nel file:
.slideInRight {
-webkit-nome-animazione: slideInRight;
nome-animazione: slideInRight;
}
Puoi ripetere questo processo per creare tutte le animazioni che desideri. Quindi, salva il file come animate.css. In alternativa, puoi scaricare il popolare file Animate.css . Contiene i fotogrammi chiave e le classi CSS per dozzine di animazioni popolari, quindi non devi codificarne uno tuo.
Passaggio 3: carica il tuo file animate.css sul tuo sito
Una volta completato il file animate.css , dovrai caricarlo nella directory del tema. Per fare ciò, accedi al tuo sito utilizzando File Transfer Protocol (FTP) e un client FTP come FileZilla . Puoi trovare le credenziali necessarie nel tuo account di hosting.
Dovrai entrare nella tua directory public_html , accedere a wp-content> temi e trovare la cartella per il tuo tema attivo (o child theme):
Cerca una sottodirectory etichettata css . Se ne esiste uno, caricare l’animate.css del file (o l’animate.mini.css file da Animate.css) ad esso. Nel caso in cui non disponi già di questa cartella, puoi facilmente creare una nuova sottodirectory e denominarla di conseguenza:
Dopo che il tuo file è stato caricato con successo, non lasciare subito il tuo client FTP. Dovrai modificare un po ‘i file per accedere a questo foglio di stile sul tuo sito WordPress.
Passaggio 4: chiama il foglio di stile Animate tramite functions.php
Successivamente, nella cartella del tuo tema attivo, trova il tuo file functions.php . Alla fine, aggiungi questo snippet di codice:
add_action ('wp_enqueue_scripts', 'wpb_animate_styles');
funzione wpb_animate_styles () {
wp_enqueue_style ('animate-css', get_stylesheet_directory_uri (). '/css/animate.css', '3.5.0', 'all');
}
Tieni presente che, se hai caricato il file animate.min.css da Animate.css, dovrai utilizzare animate.min.css nell’ultima riga invece di animate.css.
Ciò consente al tuo tema di chiamare il foglio di stile che hai appena caricato in modo da poter applicare le classi in esso contenute agli elementi del tuo sito. Una volta salvate le modifiche, torna alla dashboard di WordPress.
Passaggio 5: applicare le animazioni utilizzando le classi CSS
Ora puoi applicare qualsiasi classe nel tuo file animate.css agli elementi nei tuoi post e pagine. Se utilizzi il file Animate.css, puoi fare riferimento a un elenco completo di tutto ciò che include su GitHub .
Passa al post o alla pagina contenente l’elemento che desideri animare. Nell’editor classico, passa all’editor di testo. Se utilizzi l’Editor blocchi, fai clic sull’icona a tre punti dalla barra degli strumenti del blocco e seleziona Modifica come HTML :
Quindi, aggiungi la classe animata e la classe per l’animazione al tag dell’elemento:
Infine, visualizza l’anteprima del tuo post o della tua pagina. La tua animazione dovrebbe ora funzionare:
Puoi adattare questo processo per incorporare qualsiasi animazione nel tuo file animate.css .
