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
