Skip to content

Latest commit

 

History

History
18 lines (10 loc) · 1.52 KB

File metadata and controls

18 lines (10 loc) · 1.52 KB

animare-un-testo-con-l-effetto-onda

cotinuiamo ad analizzare la potenza del css

tecnologie utilizzate

In questo tutorial per risparmiare del tempo utilissimo (ricordiamoci sempre che il tempo è oro nel nostro lavoro di sviluppatori e web designer) ho deciso di utilizzare PUG e SASS.

Perchè queste tecnologie?

Come ho già detto, il tempo è oro e per realizzare l'animazione di questo testo avrei dovuto spendere all'incirca due minuto per scrivere il 26 div che compongono il testo animato o forse 10 secondi con l'utilizzo di emmet.

La mia sceltà però è ricaduta su PUG in quanto voglio indirizzarvi verso l'utilizzo di questa tecnologia potentissima - vedremo più in là come sfruttarla nei nostri siti web - e interessantissima.

La scelta di utilizzare SASS viene dalla necessità di dover evitare di scrivere per ben 26 volte la stessa regola, ma non sonolo. Grazie a SASS e alla possibilità di creare delle vere e proprie funzioni - vedi il ciclo for utilizzato - mi ha permesso di risparmiare altro tempo nell'esecuzione di calcoli complessi utili per il risultato finale.

Obiettivo

Realizzare, anche in questo caso, un'animazione senza l'utilizzo di codice JavaScript. Capire la potenza del CSS è utilie per risparmiare risorse prezione sul server nel momento in cui andiamo a realizzare il nostro sito. Meno chiamate JS facciamo e più benefici otterremo dal punto di vista della velocità e della SEO (ovviamente non basta utilizzare poco JS per scalare le pagine di Google).