Animacija div elemenata

SMIL se može koristiti i za animaciju html elemenata. Ovdje ćemo probati animirati div element da se pomiče lijevo-desno kada se klikne na njega. Sa ovim primjerom vidjet ćemo from, to i autoreverse atribute. Pa krenimo sa kodom. Prvo napravimo div element u kojega ćemo ispisati naš tekst.

<div id="pomicni" style="position:relative;left:100;width:200; height:60;background-color: #c8c8c8;text-align:center; overflow:hidden"> Kada kliknete Počinje kretanje </div> <t:par begin="pomicni.onclick"> <t:animate targetElement="pomicni" attributeName="left" from="100" to="350" begin="0s" dur="8s" autoreverse="true" /> </t:par>

Kada kliknete
Počinje kretanje

Vidimo da se atribut left div elementa mijenja od vrijednosti 100 do 500 i onda nazad jer mu jer smo to naložili sa autoreverse="true". Isto ovako možemo mijenjati sve atribute koji su nam dostupni u nekom html tagu. Pogledajmo sada primjer promjene dva atributa div elementa. Napišimo isti div element koji će se sada kretati i mijenjati boju.

<div id="boja" style="position:relative;left:100; width:200; height:60;background-color: #c8c8c8; text-align:center;overflow:hidden"> Kliknite da<br> počne kretanje<br> i mijenjanje boje </div> <t:par begin="boja.onclick"> <t:animate targetElement="boja" attributeName="left" from="100" to="350" begin="0s" dur="8s" autoreverse="true" /> <t:animateColor targetElement="boja" attributeName="background-color" values="#c8c8c8;#ff0000;#00ff00;#0000ff" begin="0s" dur="8s" autoreverse="true" /> </t:par>

Kliknite da
počne kretanje
i mijenjanje boje

U zadnjem primjeru se koristi tag <par> koji omogućava izvršavanje više animacija odjednom odnosno paralelno. Unutar par taga nalaze se dvije vremenske linije (time line) - jedna za animaciju kretanja (animate), a druga za animaciju boje (animateColor).

Ako ste naučili nešto novo napišite jedan komentar podrške.
Hvala!

Autor: Vedran

Datum objave: 21.01.2008

Za vas smo izdvojili:

■  Kretanje po predefiniranoj liniji
■  SMIL - uvod
■  SMIL prijelazi - transitions

Zadnjih 5 članaka

■  Izgubljena particija i dokumenti
■  Kako napraviti crosover kabel
■  Spam poruke
■  Hiperveze između Word dokumenata
■  Lozinke, lozinke ...

KOMENTARI:

Nema još ni jednog komentara.

Samo registrirani korisnici mogu komentirati.