Pentru inceput avem nevoie de orice svg simplu, de preferat sa contina doar paths, adica sa nu aiba color fills.
Ce este un svg? well un SVG reprezinta prescurtarea pentru Scalable Vector Graphics, este un format pentru imagini de tip vectorial.
Ca sa obtineti codul dintr-un svg, deschidetil cu orice text editor si o sa vedeti tot codul sursa, sau copiati html-ul de la mine :))
Codul HTML
CSS
Css-ul e chiar putin, l-am folosit doar sa centrez svg-ul pe pagina
javascript/jQuery
Aici e distractia, Am sa va povestesc logica codului in cateva randuri si codul il afisez mai jos.
Ca sa animezi un SVG este nevoie sa iei fiecare path in parte cu javascript si sa ii determini lungimea, eu am facut asta intr-un each loop, in momentul in care avem lungimea o atribuim lui stroke-dasharray si stroke-dashoffset, in momentul in care facem asta, desenul svg va disparea si acuma ne putem apuca de animatie. Folosindune de functia animate din jquery, animam doar dashoffset la 0, asta ii va da efectul de "desenare".
Am sa fac candva si o versiune video a tutorialului unde am sa explic pas cu pas totul.
Hachiy.
Tutorial acceptat.
VizitatorVin 28 Aug - 18:11