Tutorial : Pusing Pusing Dengan CSS3 | downgila

Wednesday, March 07, 2012

Tutorial : Pusing Pusing Dengan CSS3

css3 html5 banners
Kalau lu orang tak tahu, CSS punya animation adalah sangat awesome, smooth, ringan, dan menjimatkan masa loading. Sebenarnya blog omputeh banyak dah pakai HTML5 dengan CSS3. Blog melayu je still pakai yang widget2 welcome to my blog lah, kursor bunga bunga bagai. Buat sakit mata. Yes offence.

Sebagai permulaan, hari ni tetiba gua nak share sikit. Gua pun tak power pun, semua belajar sendirik, ada ilmu simpan sorang sorang buat apa kan. Antara efek yang gua suka pakai adalah efek "spinning".

Mula mula, nak pusing pusing, kena la ada gambar kan. kalau tak ada nak pusing apa.So, lu orang buat la satu gambar dekat Photoshop ke apa apa. Lepas tu upload la letak dekat gadget tepi macam yang gua buat dekat sebelah bahagian "Mari Berborak"

Lepas dah ada gambar, kita kena create asas animasi tersebut dengan menggunakan
 @-{vendor}-keyframes:

Pergi dekat bahagian CSS dalam template dan masukkan ini, carik ]]></b:skin> dan paste code ni kat atas.

@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}


@-moz-keyframes rotater {
0% { -moz-transform:rotate(0) scale(1) }
50% { -moz-transform:rotate(360deg) scale(2) }
100% { -moz-transform:rotate(720deg) scale(1) }
}

-webkit- maksudnya untuk Chrome dan Safari dan apa apa yang base dengan Webkit. -moz- pulak untuk mozilla dan Gecko punya browser-based.

Fungsi -webkit-transform adalah untuk menggerakkan gambar.  Masa dekat 0% gambar tu dekat 0 rotation dan skala 1 -- saiz asal gambar.  Dekat 50% pusing, gambar akan pusing 360 darjah (satu pusingan lengkap), lepas tu membesar dengan skala 2 kali ganda (scale(2))  Dekat 100%, gambar akan balik ke saiz asal dan berpusing 720 darjah, so nampak macam asal tadi.

****

Animasi dah siap, kita apply pulak code bila orang letak mouse dekat gambar, macam ni, ni pun letak dekat CSS punya section dalam template blog.

Mula mula, set satu ID untuk gambar tu, gua pilih  #emel-me 


#emel-me a {
display: block;
width: 200px;
height: 200px;
text-indent: -9999px;
background: url(url gambar) no-repeat 0 0;
}


#emel-me a:hover {
/* safari / chrome */
-webkit-animation-name:rotater; 
-webkit-animation-duration:500ms
-webkit-animation-iteration-count:1
-webkit-animation-timing-function: ease-out;


/* mozilla */
-moz-animation-name:rotater; 
-moz-animation-duration:500ms
-moz-animation-iteration-count:1
-moz-animation-timing-function: ease-out;


/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-o-transition-timing-function: ease-out;
}

Pergerakan ni di-assigned menggunakan -webkit-animation-name yang kita dah declare awal awal tadi. Efek lain boleh jugak letak.


-webkit-animation-duration menjadikan satu animasi lengakp ni jalan dalam masa 500 millisaat, kalau nak tambah boleh je.


-webkit-animation-iteration-count untuk bagi dia pusing sekali, tapi dekat gambar sebelah tu gua pakai 2, so dia pusing 2 kali.

dan -webkit-animation-timing-function set animasi tu efek dia ease-out. Maksud dia dia slow last2 tu.

****

Last sekali, pergi dekat image yang korang letak dekat gadget tadi. Korang kena assign div element dekat gambar tu ikut nama yang di declare dlam css tadi. Contoh macam gua punya

<div id="emel-me">
<a href="mailto:gamep01nt@yahoo.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="url gambar" /></a>
</div>


Siap. Ada soalan tanya, Senang je kan, KAH KAH KAH


*kemaskini : kat mana nak letak CSS.



Sambung Baca

Related Posts Plugin for WordPress, Blogger...