Menerapkan Efek Hover Animasi Css Pada Template Blog

Menerapkan efek hover animasi css3 pada template blog, JQuery sudah tidak diragukan lagi dalam hal efek animasi, kehalusan dan kemulusan efek animasinya bisa membuat tampilan blog menjadi lebih menarik, jquery yang merupakan turunan dari javascript yang sudah bertahta cukup lama dalam efek animasi dan sekarang mulai mendapat saingan yang cukup seimbang dengan hadirnya Efek Animasi Css3.

Seiring berkembangnya teknologi, css yang dulunya belum bisa menghadirkan efek animasi, sekarang dengan hadirnya css3, efek animasi sudah bisa dibuat, efek animasi yang dihasilkan dari css3 tidak kalah halus dengan efek animasi jquery. Dengan alasan tersebut saya lebih memilih penggunaan css untuk efek animasinya, walaupun begitu saya juga tidak menutup kemungkinan menggunakan efek animasi jquery sebagai efek animasi dalam blog untuk mempercantik tampilan.

Pada posting sebelumnya pernah dicontohkan beberapa efek hover animasi dengan css3, jika pada postingan tersebut agak kesulitan dalam menerapkannya pada template blog, saya akan sedikit memberikan gambaran, sebagai contoh saya ambil contoh script kode css seperti ini :

.contoh {
color: #666;
font-size: 30px;
font-family: 'Niconne', cursive;
text-shadow: 0px 1px 0px #A6A6A6;
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}
.contoh:hover {
-webkit-transform:translate(60px, 0px);
-moz-transform:translate(60px, 0px);
-o-transform:translate(60px, 0px);
transform:translate(60px, 0px); 
}

Pada script css tersebut akan menghasilkan efek pergeseran objek kearah kanan sebesar 60px, sebagai contoh untuk menerapkannya pada template blog, kita akan menerapkan efek tersebut untuk judul post, hal pertama yang dicari pada template adalah bagian css yang membentuk style pada judul post tersebut, biasanya kode css untuk judul post menggunakan kode .post h3 {, pada .post h3 { sebelum kode penutup } akan ada kode css yang membentuk style judul post, tambahkan kode transition sebagai efek pelembut perpindahan objek(jarak waktu diukur dengan second(s)), sehingga kode .post h3 nya menjadi seperti ini :

.post h3 {
-kode style css yang terdapat pada template kalian-
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}

Setelah ditambahkan kode transition pada bagian style css judul post, belum menghasilkan efek apa-apa ketika mouse mengarah pada judul post. Untuk menghasilkan efek ketika mouse mengarah pada judul post, kita tambahkan perintah hover pada .post h3 { dan tambahkan style efek yang akan dihasilkan (sebagai contoh menggunakan script diatas), sehingga kodenya menjadi seperti ini :

.post h3:hover {
-webkit-transform:translate(60px, 0px);
-moz-transform:translate(60px, 0px);
-o-transform:translate(60px, 0px);
transform:translate(60px, 0px); 
}

transform:translate adalah efek yang dihasilkan ketika mouse mengarah pada judul post, pada script tersebut akan bergeser kearah kanan sebesar 60px. Pada template nantinya akan ada 2 .post h3 { dan yang satu lagi dengan tambahan perintah hover, sehingga kode keseluruhan style css judul post akan menjadi seperti ini :

.post h3 {
-kode style css yang terdapat pada template kalian-
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}
.post h3:hover {
-webkit-transform:translate(60px, 0px);
-moz-transform:translate(60px, 0px);
-o-transform:translate(60px, 0px);
transform:translate(60px, 0px); 
}

Dan hasil dari efek hover untuk judul post akan menjadi seperti ini : (coba arahkan mouse kearah kalimat dibawah ini)

Sample

Semoga penjelasan yang singkat dan sederhana ini bisa membantu dalam penerapan efek hover pada template blog kalian.

Semoga bermanfaat,
http://situseo.blogspot.com/
Sumber :

---

DAFTAR ISI