Aggiunta di animazioni CSS a WordPress

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 invece 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 è comunque relativamente accessibile e facile da imparare.

In questo articolo, discuteremo di come funzionano le animazioni CSS e di come aggiungere una proprietà di animazione CSS al tuo sito Web con e senza plug-in. Muoviamoci!

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 quante proprietà CSS vuoi dell'elemento, quante volte vuoi.

A differenza delle animazioni Flash o Javascript, le animazioni CSS evitano problemi di compatibilità del browser e codifica complicata. Ciò ti consente di attirare l'attenzione su caratteristiche importanti senza effetti collaterali negativi come una riduzione delle prestazioni.

Aggiunta di animazioni CSS con un plug-in

Se non sei sicuro delle tue capacità di programmazione, ti abbiamo coperto. Puoi invece 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 Block Editor.

Puoi trovare questo plugin navigando su 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 la tua semplice 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 adatta ai tuoi contenuti.

Passaggio 3: personalizza ritardo e velocità

Il plug-in Blocks Animation include anche una funzione di temporizzazione per personalizzare il ritardo e la velocità dell'animazione:

La prima di queste due impostazioni posticipa l'inizio dell'animazione. Questo può aiutare ad attirare l'attenzione sul tuo elemento dopo che la pagina è stata caricata, o permetterti di usare le animazioni in combinazione, come dimostreremo a breve. È possibile impostare la proprietà del ritardo dell'animazione fino a cinque secondi.

Utilizzando il menu a discesa della velocità, puoi rendere l'animazione Lenta, Più lenta, Veloce o Più veloce . Un'animazione più lenta può essere più sottile e meno stridente per i visitatori, mentre un'animazione più veloce farà di più per attirare la loro attenzione.

Passaggio 4: salva e visualizza in anteprima la tua animazione

Ti consigliamo di salvare il tuo post o la tua pagina come bozza e di visualizzare in anteprima il tuo elemento animato prima di pubblicarlo. Assicurati di salvare anche la proprietà del nome dell'animazione se stai lavorando con più animazioni CSS su una pagina. Sebbene le animazioni possano rivelarsi molto utili, hanno anche il potenziale per distrarre e rendere le tue pagine disordinate.

Visualizzare in anteprima la tua pagina e mantenere le tue animazioni relativamente semplici eviterà questi risultati indesiderati. Di seguito, puoi vedere il nostro esempio di animazione CSS 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 dei tuoi contenuti o ha l'effetto desiderato, puoi semplicemente tornare all'Editor blocchi e regolarla. Questo è il bello dell'utilizzo di un plug-in di animazione CSS: è facile e veloce.

Aggiunta di animazioni CSS senza plug-in

Se ti senti a tuo agio nella modifica dei file del tuo tema, puoi creare manualmente animazioni personalizzate senza plug-in. Ci vuole un po' di conoscenza del codice, quindi questa soluzione potrebbe essere lasciata a chi ha esperienza di sviluppo.

Prima di iniziare, assicurati di eseguire il backup del tuo sito. È anche consigliabile 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 apportare effettivamente qualsiasi modifica, ci sono otto proprietà importanti da tenere a mente durante la creazione di 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 in un altro punto del codice.
• animation-duration: definisce per quanto tempo deve essere eseguita l'animazione.
• animation-delay: indica per quanto tempo un'animazione deve attendere per iniziare una volta caricata la pagina.
• animation-iteration-count: rileva quante volte l'animazione deve essere eseguita.
• 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.
• animazione: una proprietà abbreviata per associare 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 venivano disegnati per entrare o uscire da esso.

Nell'animazione CSS, il fotogramma chiave specifica cosa sta succedendo e quando. Prendi questo, per esempio:

 @esempio di fotogrammi chiave {
 0% {colore di sfondo: rosso;}
 25% {colore di sfondo: giallo;}
 50% {colore di sfondo: blu;}
 100% {colore di sfondo: verde;}
 }

Il fotogramma chiave sopra indica che il 25 percento del percorso dell'animazione, il colore di sfondo dell'elemento specificato cambierà da rosso a giallo. Le percentuali vengono in genere utilizzate per definire la tempistica dell'animazione. Tuttavia, from e to possono essere utilizzati rispettivamente al posto di 0% e 100%.

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 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'animazione del fotogramma chiave CSS utilizzando le proprietà di trasformazione e visibilità, che ci consentiranno di far scorrere un elemento dal lato destro dello schermo:

 @keyframes slideInRight {
da {
-trasformazione-webkit: translate3d(100%, 0, 0);
trasformare: translate3d(100%, 0, 0);
visibilità: visibile;
}
a {
-trasformazione-webkit: translate3d(0, 0, 0);
trasformare: translate3d(0, 0, 0);
}
}

Dobbiamo quindi associare quel fotogramma chiave a una classe CSS. In questo caso, è stato chiamato slideInRight. Questo codice verrà posizionato direttamente dopo il fotogramma chiave sopra nel file:

 .slideInRight {
 -nome-animazione-webkit: 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 codificare la tua animazione complessa.

Passaggio 3: carica il file animate.css sul tuo sito

Una volta che il tuo file animate.css è completo, dovrai caricarlo nella directory del tuo 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 tema figlio):

Cerca una sottodirectory denominata css . Se ne esiste uno, carica il file animate.css (o il file animate.mini.css da Animate.css) su di 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 correttamente, non abbandonare immediatamente il tuo client FTP. Avrai bisogno di apportare una piccola modifica ai file per accedere a questo foglio di stile sul tuo sito WordPress.

Passaggio 4: chiama il foglio di stile Animate tramite functions.php

Quindi, nella cartella del tuo tema attivo, trova il tuo file functions.php . Alla fine, aggiungi questo frammento 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 anziché 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: applica le animazioni utilizzando le classi CSS

Ora puoi applicare qualsiasi classe nel tuo file animate.css agli elementi nei tuoi post e nelle tue pagine. Se stai usando il file Animate.css, puoi fare riferimento a un elenco completo di tutto ciò che include su GitHub.

Vai al post o alla pagina contenente l'elemento che desideri animare. Nell'editor classico, passa all'editor di testo. Se stai utilizzando l'Editor blocchi, fai clic sull'icona a tre punti nella barra degli strumenti del blocco e seleziona Modifica come HTML :

Quindi, aggiungi la classe animata e la classe per la tua animazione al tag dell'elemento:

Infine, visualizza in anteprima il tuo post o la tua pagina. La tua animazione ora dovrebbe funzionare:

Puoi adattare questo processo per incorporare qualsiasi animazione nel tuo file animate.css .

Mantieni un ottimo aspetto del tuo sito con WP Engine

L'utilizzo di funzionalità visivamente interessanti come le animazioni può coinvolgere i visitatori del tuo sito e creare una presenza online più professionale. Qui a WP Engine, siamo orgogliosi di fornire i migliori suggerimenti e trucchi per gli sviluppatori di WordPress in modo che il tuo sito appaia sempre al meglio.

Se combinato con la nostra piattaforma di hosting di prim'ordine, avrai tutti gli strumenti necessari per impressionare i tuoi utenti. Dai un'occhiata ai nostri piani oggi!