Divertenti tooltip personalizzati per il tuo sito web

Una piccola raccolta di divertenti suggerimenti (tooltip) implementati in SVG e anime.js. Vediamo di trasformare  noiosi tooltip in un elemento animato e divertente!

La forma del blocco che contiene  suggerimenti sono fatti in  SVG e l'animazione viene eseguita attraverso lo script anime.js. Il formato SVG consente di convertire liberamente gli oggetti grafici nel nostro caso le figure di vario tipo. Cosi potresti anche tu aggiungere suggerimenti a varie elementi sul tuo sito web e renderli piu piacevoli e divertenti.

Per applicare una delle animazione con rispettiva figura ad un elemento sul tuo progetto dovresti collegare alla tua pagina fail di javascript come main.js e anime.js e scegliere dal fail index.html del esempio che potrai scaricare sotto il codice che rappresenta la figura voluta. Vediamo un esempio della sintassi.

<div class="tooltip tooltip--cora" data-type="cora">
<div class="tooltip__trigger" role="tooltip" aria-describedby="info-cora">
<span class="tooltip__trigger-text">Cora</span>
</div>
<div class="tooltip__base">
<svg class="tooltip__shape" width="100%" height="100%" viewBox="0 0 400 300">
<path d="M 199,21.9 C 152,22.2 109,35.7 78.8,57.4 48,79.1 29,109 29,142 29,172 45.9,201 73.6,222 101,243 140,258 183,260 189,270 200,282 200,282 200,282 211,270 217,260 261,258 299,243 327,222 354,201 371,172 371,142 371,109 352,78.7 321,57 290,35.3 247,21.9 199,21.9 Z"/>
</svg>
<div class="tooltip__content" id="info-cora">Sono suggerimento animato rachiuso nella figura di base!</div>
</div>

E per vedere suggerimenti animati avvicina il tuo puntatore ad una delle frasi sotto

Sono suggerimento animato rachiuso nella figura "Dori".
La tua guida nel costruire un sito web

 

Letto 254 volte