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.



14 comments:

  1. anak harom. apeeeeeeeeeeeeeeeeeeeeeee ni!

    ReplyDelete
  2. mohon terangkan. gua pening

    ReplyDelete
  3. bijokk molepppp

    ReplyDelete
  4. kejapppp..ak rase ak dh paham sikit. tp css punye part kat mane dlm template?

    ReplyDelete
    Replies
    1. hah soalan ni gua suka. CSS part tu kau atas code ]]>, tu CSS punya section

      Delete
  5. err , jap² .
    css ni bukan ade header ke ?
    ke ni section dalam header ?

    ReplyDelete
    Replies
    1. section ni dalam CSS punya section. css punya section tu aku ada mention kat dalam post. Tak boleh mention kat comment. kat SINI boleh baca lagi mana section CSS

      Delete
  6. kalau yg noob, dia bubuh welcome tu my fb page. loading 20 sec. pukimak

    ReplyDelete
    Replies
    1. KAH KAH KAH!! comment lu mmg dr dulu epik abg zam! gua suka!

      Delete
  7. Fak!! gua muntah 3 kali lepas baca entri lu. Watdefisss is dizz?? @___@

    ReplyDelete
  8. sbb tu la gua fail programing. c++ pun gua barai lagi bro! haha

    ReplyDelete
  9. Salam bro,
    Ni code tuk tempek dalam blogspot kan? WP boleh?

    ReplyDelete
    Replies
    1. salam...aduh. WP aku tak pasti lah bro, aku xpernah pkai WP...so xtaw kat mana nak letak CSS semua

      Delete
  10. bagus. boleh wat guide masa akan datang

    ReplyDelete

Sambung Baca

Related Posts Plugin for WordPress, Blogger...