Le animazioni realizzate in CSS, noto linguaggio di programmazione, sono ampiamente utilizzate sul Web perché consentono di rendere più dinamico un portale ed attirare l’attenzione del visitatore, ad esempio mediante un effetto di dissolvenza o bounce (rimbalzo) di una finestra o “scroll infinito” (altro espediente popolare sul Web, scorrendo la pagina verso il basso vengono proposti continuamente nuovi contenuti all’internauta). Tra gli altri vantaggi anche i tempi di caricamento più rapidi rispetto a Flash ed altre soluzioni e l’ampio supporto
Per gli utenti alle prime armi l’implementazione di animazioni CSS è un compito arduo perchè, oltre alla modifica del tema in uso, occorre naturalmente avere delle basi di programmazione CSS. Il plugin che andiamo a presentare oggi, senza la necessità di digitare alcuna linea di codice, viene incontro agli utilizzatori inesperti semplificando la creazione degli “effetti speciali”, vediamo insieme come.
Utilizzo del plugin ed inserimento delle animazioni CSS
Dopo aver scaricato ed installato il plugin Animate It! è possibile iniziare immediatamente a creare delle animazioni, non è richiesto infatti alcun setup aggiuntivo. Come è possibile notare dallo screen qui di seguito, il plugin non è altro che un comodo editor visuale grazie al quale è possibile animare gli elementi inseriti.
L’icona del plugin appare nella consueta barra degli strumenti WordPress – come mostrato nello screen
Nella nuova finestra che ci si presenta dovremo scegliere quale tipologia di animazione impiegare, la durata di quest’ultima e l’eventuale ritardo di attivazione. Nella seconda metà della finestra troviamo invece le voci relative alle condizioni di attivazione dell’animazione: click dell’utente, passaggio del mouse, scroll. Ricordiamo che cliccando sul tasto “Animate it” è possibile visionare l’anteprima dell’animazione. Una volta raggiunto il risultato desiderato premiamo il tasto“Insert”.
Il plugin genererà a questo punto lo shortcode necessario all’esecuzione dell’animazione nel CMS. Ora non resta che sostituire il testo d’esempio (“Lorem Ipsum is simply…”) con l’elemento che intendiamo animare. Salviamo infine il post e visualizziamo l’anteprima per verificare il corretto funzionamento dell’animazione.
Complimenti, avete inserito un’animazione CSS in un post WordPress.
