Lo sviluppo web è cresciuto in modo incredibile in questi ultimi anni, la presenza di progetti open source è aumentata a dismisura e piattaforme dedicate alla condivisione di codice come CodePen o GitHub hanno contribuito moltissimo a questa crescita.
Oggi lo sviluppatore non è più una persona che “fissa lo schermo” e che rimbalza da una reference a un’altra, ma ha la possibilità di mettersi in contatto con la community e di crescere ancora più velocemente.
Più che mai oggi abbiamo la possibilità di collaborare, discutere e crescere grazie al confronto diretto che possiamo avere con gli altri sviluppatori e questo è proprio quello che è successo con il progetto che ti presento quest’oggi: Animate.
Grazie a questo semplice file CSS sarai in grado di includere un gran numero di animazioni senza neanche dover sapere come si costruiscono, tutto quello che ti serve è utilizzare la giusta classe 😉
Ci siamo già trovati alcune volte a parlare all’interno di questo blog delle animazioni CSS, se non hai voglia di cercare puoi consultare il nostro articolo sulle transizioni CSS e quello sui keyframe che ti prepareranno a comprendere la base che sta dietro a questo progetto.
Se hai letto l’articolo riguardante i keyframe oppure se conosci già queste nozioni, sarai al corrente che creare una animazione CSS è un’attività mangia tempo!
[clickToTweet tweet=”Creare #cssanimation con soli #keyframe è lunga, meglio appoggiarsi a questa libreria #CSS!” quote=”Creare animaioni CSS con soli keyframe è una lunga strada, meglio appoggiarsi a questa libreria!”]
Questo perché per ogni singolo effetto dobbiamo definire i tempi di esecuzione, identificare i momenti in cui avviene il cambiamento di stato e sicuramente dovremo testare più e più volte il codice per assicurarci che tutto funzioni correttamente.
Per fortuna nostra tutti questi problemi sono finiti, almeno in parte…
Diamo il Benvenuto ad Animate.css
Ebbene si, includendo un semplice foglio di stile all’interno dei tuoi progetti sarai libero di aggiungere delle animazioni CSS con il minimo sforzo, tutto quello che devi fare è utilizzare la giusta classe.
La libreria contiene più di 50 animazioni differenti, alcune sono molto utili mentre altre divertenti, ma non siamo qua a parlare della libreria di per sé, come ben sai non mi dedico molto alla scrittura di articoli news, piuttosto desidero mostrarti come puoi utilizzare queste nuove conoscenze per applicarle al tuo prossimo progetto web.
In questo articolo ti mostrerò come implementare questa libreria di effetti nel tuo prossimo progetto web, ma dato che parliamo molto di Sass e abbiamo un intero corso dedicato, ti mostrerò anche come sia semplice utilizzare la libreria convertita per questo compilatore.
Inizia a Lavorare con Animate.css
La primissima cosa da fare per iniziare a lavorare con questa libreria è… scaricarla 🙂
Ci sono diversi metodi che ti permetteranno di farlo. Puoi usare il link presente nel sito, richiedere la libreria attraverso Bower oppure clonare direttamente il repository GitHub. Non è molto importante quello che scegli, la cosa importante per seguire questo articolo è avere una copia di questo progetto.
Per proseguire con gli esempi che ti mostrerò in questo articolo le uniche cose di cui avrai bisogno sono:
- una pagina HTML
- il foglio di stile di Animate.css, nient’altro.
Non ti preoccupare, non devi far altro che copiare il codice presentato ed incollarlo all’interno del foglio di stile del tuo progetto. Se invece hai scaricato il pacchetto .zip che ho preparato appositamente per te, aprilo perché adesso dovremo andare a modificare il codice HTML dei seguenti elementi:
<div id="center"> <p>Questo elemento verrá animato.</p> </div>
Come ti ho detto precedentemente, adesso che la libreria animate.css è collegata alla tua pagina HTML, tutto quello che devi fare è aggiungere le classi necessarie per avviare l’animazione. Partiamo dal presupposto che qualsiasi elemento che desideri animare deve presentare al suo interno la classe animated seguita dal nome di una delle animazioni che vuoi eseguire.
Partiamo dalle cose semplici e vediamo come sia possibile applicare l’animazione bounce.
Personalmente ritengo questo effetto molto carino dato che potrebbe essere utile per attirare l’attenzione dell’utente o per rispondere all’azione che quest’ultimo ha intrapreso con gli elementi della nostra pagina. Ma come si applica?
<div id="center" class="animated bounce"> <p>Questo elemento verrá animato.</p> </div>
Come puoi notare tu stesso, basta aggiungere un paio di classi al nostro markup HTML e l’animazione viene applicata senza alcun problema. Ma non ti devi fermare qua, non hai soltanto l’opportunità di aggiungere una classe e lasciare che il tuo bottone rimbalzi una volta caricata la pagina. Se desideri che questo effetto continui all’infinito non devi far altro che utilizzare la classe infinite e questo ripeterà l’animazione proprio come nell’immagine che ti ho appena mostrato.
Oltre a questo, con un pizzico di JavaScript potresti aggiungere un ritardo all’aggiunta di una classe, potresti collegarla all’esecuzione di un evento (come il click) apparso all’interno della pagina facendo in modo di ritardare l’animazione stessa e farla partire soltanto quando necessario.
Purtroppo non è quello che andremo a fare in questa articolo perché voglio presentarti la libreria Animate.scss e aiutarti a capire perché preferisco di gran lunga questo approccio.
Come utilizzare Animate.scss
Tutto il codice che verrà utilizzato è presente all’interno di un repository Github che è stato sviluppato come implementazione Sass della libreria di animazioni CSS che ti ho presentato precedentemente, quindi senza perdere altro tempo vediamo come implementarla all’interno di un progetto.
Come è successo precedentemente, anche questa volta ti chiedo di scaricare l’archivio .zip che ho creato per questo articolo. A differenza del precedente è meglio che tu lo scarichi immediatamente perché contiene già tutti i file che ti permeteranno di lavorare e di fare pratica con i prossimi esercizi.
All’interno del pacchetto troverai tutto quello che ti serve per iniziare a lavorare con Animate e SCSS ma mi raccomando, assicurati di avere Gulp installato sul tuo sistema, se così non dovesse essere, puoi sempre leggere questo articolo e tornare a consultare questo una volta che avrai configurato il tuo ambiente di sviluppo.
Scaricato lo .zip ed estratto dovrai entrare all’interno della cartella animate-scss/ ed eseguire (da terminale) il comando npm install. Questo ti permetterà di scaricare tutti i file necessari alla corretta esecuzione di Sass e di compilare il tuo codice SCSS lanciando il comendo gulp una volta terminata l’installazione di tutte le dipendenze.
Una volta lanciato il comando gulp apri con il tuo editor di codice preferito, noi consigliamo Atom, la cartella contenente tutti i file del progetto ed apri scss/_custom.css ed aggiungi la seguente regola:
//Inserisci il codice di cui hai bisogno
#center {
@include bounce();
}Come puoi notare tu stesso in testa a questo applichiamo il mixin che permette di aggiungere l’effetto bounce ai nostri elementi.
Forse ti stai chiedento: ma perché dovrei sbattermi ad usare Sass?
La risposta semplice è non devi, se quello che ti interessa sono soltanto le animazioni CSS puoi tranquillamente utilizzare il metodo che ti ho mostrato precedentemente e il gioco è fatto, potrai aggiungere le classi che desideri al tuo HTML e inserire tutte le animazioni che desideri.
Ti sto consigliando questa strada perché avrai un maggior controllo su ciò che sta avvenendo e anche sul numero di animazioni che includerai nel progetto. Questo ti permetterà di creare dei fogli di stile più leggeri e ottimizzati migliorando di conseguenza le prestazioni del tuo sito web.
Non mi credi? Andiamo a vedere insieme il codice contenuto in animate.scss:
// Always required @import "_properties"; // Import the animations @import "_attention-seekers/attention-seekers.scss", "_bouncing-entrances/bouncing-entrances.scss", "_bouncing-exits/bouncing-exits.scss", "_fading-entrances/fading-entrances.scss", "_fading-exits/fading-exits.scss", "_flippers/flippers.scss", "_lightspeed/lightspeed.scss", "_rotating-entrances/rotating-entrances.scss", "_rotating-exits/rotating-exits.scss", "_sliding-entrances/sliding-entrances.scss", "_sliding-exits/sliding-exits.scss", "_specials/specials.scss", "_zooming-entrances/zooming-entrances.scss", "_zooming-exits/zooming-exits.scss"; @import "_custom.scss";
Lo sviluppatore di questa libreria ci ha permesso di selezionare punto per punto quali sono gli effetti che vogliamo applicare. Diciamo che non vogliamo nientaltro che gli effetti che fanno fare un bounce in entrata? Ebbene puoi cambiare il nostro animate.scss in questo modo:
// Always required @import "_properties"; // Import the animations @import "_bouncing-entrances/bouncing-entrances.scss"; @import "_custom.scss";
A parte il numero di righe risparmiate, prova per un attimo a vedere quanto è più leggero il foglio style.css che viene generato…
Come ultimo consiglio, anche se nel progetto che ti ho fatto scaricare il codice HTML è già configurato correttamente, assicurati di collegare il file .css corretto anche se sono convinto che sai già come fare 😉
Conclusione
Spero che averti presentato questa libreria ti sia di utilità in questo web sempre più movimentato, ma prima di lasciarti vorrei fare un paio di riflessioni con te per capire come sfruttare al meglio.
Poco fa abbiamo anche parlato di JavaScript e anche se ti consiglio di approfondire le tue conoscenze con l’omonimo corso, grazie alla dinamicità di questo linguaggio potresti aggiungere/rimovere le classi a seconda della tua necessità in modo da poterle eseguire nel momento migliore. Potresti far apparire un elemento soltanto se l’utente preme un determinato bottone, farlo scomparire, metterlo il risalto…
Insomma già con la semplice unione di JavaScript e CSS saresti in grado di creare molti effetti, ma perché quindi utilizzare Sass?
Ebbene, dal mio punto di vista te lo consiglio perché permette di personalizzare le azioni in modo incredibilmente semplice! Per prima cosa puoi prenderti la libertà di aprire il file _properties.scss e modificare qualsiasi valore di default che verrà usato all’interno del progetto. Ma se hai la necessità di modificare il comportamento di un singolo elemento, di un singolo mixin, la cosa risulta ancora più semplice:
.your-class-name {
@include bounceIn(
$duration: 1s,
$count: 2,
$delay: .2s,
$function: ease,
$fill: both
);
}Come puoi vedere grazie alle variabili Sass hai un’ottimo controllo sulle singole proprietà di una animazione, cosa che non è facilmente realizzabile se hai preferito la soluzione CSS.
Spero che quello che hai trovato sia utile al tuo lavoro e che tu comprenda sempre più perché ritengo che Sass è un ottimo strumento che dovresti implementare nel tuo processo di sviluppo. Se hai qualche dubbio, domanda o suggerimento non esitare a contattarmi con i commenti o utilizzando direttamente la pagina Contatti, un confronto è sembre ben accolto.
Lascia un commento