Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Wireless ipb theme [punBB]
Scris de DenisPasca Mier 7 Dec - 23:51
» [Animate] Recent Topic IPB
Scris de DenisPasca Lun 5 Dec - 22:44
» Ipb Counter-strike Special FG
Scris de DenisPasca Sam 3 Dec - 22:52
» Special Theme Extrem Tutorials
Scris de cosminelu21 Vin 2 Dec - 23:48
Cuvinte-cheie

menu  Statistici  html  chenar  Metin2  tema  ultimele  animate  Mesaje  reclama  meniu  phpBB2  Bara  drop  edit  profil  avatar  legenda  banner  punbb  subiecte  radio  cautare  tutorial  subforumuri  navigare  

[Tutorial] Cum sa animezi un SVG cu jQuery


In acest tutorial am sa va invat sa animati o orice svg simplu care contine numai paths, de genul asta DEMO

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.

Comentariile utilizatorilor
Vizitator
la data de Vin 28 Aug - 18:11
Vizitator Vizitator
Conectat
Uhm...e chiar interesant. Felicitari pentru realizarea acestuia și mulțumim pentru întreaga implicare !

Tutorial acceptat.
Membru dedicat
la data de Vin 28 Aug - 20:02
mr.franta Membru dedicat
Conectat
si pot anima orice imagine?
Membru ET
la data de Vin 28 Aug - 20:25
Andrei34 Membru ET
Conectat
Foarte frumos tutorialul. Bravo, Hachiy!

@mr.franta Cred ca da, dar probabil ca trebuie sa editezi codurile!
Membru ET
la data de Vin 28 Aug - 21:45
Hachiy Membru ET
Conectat
da poti anima orice svg, tot ce trebuie sa faci e sa inlocuiest svg-ul din html,
Membru ET
la data de Vin 28 Aug - 23:26
RyNo Membru ET
Conectat
Este foarte bun tutorialul bv.
Admin & Dezvoltator
la data de Sam 29 Aug - 2:06
SSYT Admin & Dezvoltator
Conectat
Foarte frumos, si in acelasi timp foarte profesional, insa nu cred ca acest cod este creat in totalitate de tine, insa felicitari pentru munca depusa si postare !
Membru ET
la data de Sam 29 Aug - 2:48
Hachiy Membru ET
Conectat
Poftim? e 100% facut de mine ... nu e nimic greu ...