Da molti anni seguo con passione il lavoro di Codrops un sito di tutorial di web design e sviluppo che aggiorna costantemente i suoi contenuti.
Codrops definisce il suo sito “un emozionante parco giochi per condividere la passione per il web design e lo sviluppo web”.
In questo articolo, sono presenti una serie di animazioni ottenute con delle semplici linee e sottili microinterazioni che aggiungono un freschezza al design della pagina e ne migliorano l’aspetto.
Molti esempi utilizzano come linea, un pseudo-elemento di SVG animato.
<a href="https://tympanus.net/Development/LineHoverStyles/" class="link link--carme">
<span>Vai alla demo</span>
<svg class="link__graphic link__graphic--stroke link__graphic--scribble" width="100%" height="9" viewBox="0 0 101 9"><path d="M.426 1.973C4.144 1.567 17.77-.514 21.443 1.48 24.296 3.026 24.844 4.627 27.5 7c3.075 2.748 6.642-4.141 10.066-4.688 7.517-1.2 13.237 5.425 17.59 2.745C58.5 3 60.464-1.786 66 2c1.996 1.365 3.174 3.737 5.286 4.41 5.423 1.727 25.34-7.981 29.14-1.294" pathLength="1"></path></svg>
</a>
L’effetto è ottenuto animando la proprietà stroke dell’elemento <path> e usando un trucco per “normalizzare” la lunghezza del percorso e non doversi preoccupare della lunghezza reale.
