CSS 3 memang tidak ada habisnya, sesuatu yang memang sangat menakjubkan bagi kita yang gemar mengubah tampilan website.
CSS 3 Pseudo-class misalnya yang bisa membuat interaksi user lebih menarik dengan hover, visited, active dan sebagainya.
Dalam CSS 3 kita bebas membuat tampilan website menjadi menyenangkan pengunjung..
CSS 3 sendiri menjadi salah satu source kode yang sering digunakan dan populer untuk dipelajari, meskipun bukan bahasa program, CSS 3 memiliki tempat tersendiri dan juga penting untuk membuat tampilan website menarik.
Bicara tentang CSS 3 kalian pasti tahu tentang key-frame animation-kan?.
Keyframe merupakan style dari CSS 3 yang biasa digunakan untuk membuat efek animasi yang secara bertahap dari style saat ini menjadi style baru.
Keyframe sering digunakan bersama style animation. Contohnya adalah tampilan gambar pada blog mbak igniel.
Disana kalian akan menemukan tampilan gambar yang memiliki efek goyang kekanan den kiri secara teratur ketika kursor ada diatasnya (hover).
Nah kali ini saya akan memberikan cara membuat efek goyang pada sebuah gambar seperti blog igniel, berikut ini sourcenya.
Cara memeberikan efek goyang pada gambar dengan CSS.
Efek goyang pada gambar diblog ini bisa diterapkan pada semua template blogger ataupun wordpress, namun dengan penyesuaian tertentu pastinya.
Sebelum memasang efek goyang pada gambar blog, mari kita lihat dulu source kode yang akan digunakan.
Berikut ini source kodenya.
a. Source kode efek goyang CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML IMAGE GOYANG SAAT HOVER</title>
<style>
img {
max-width:600px;
height:auto
}
img:hover, .shakeimg:hover {
animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;
-moz-animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;
-webkit-animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;
-o-animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;
transform:translate3d(0,0,0);
backface-visibility:hidden;
perspective:1000px;
}
@keyframes shake {
10%, 90% { transform:translate3d(-1px,0,0) }
20%, 80% { transform:translate3d(2px,0,0) }
30%, 50%, 70% { transform:translate3d(-4px,0,0) }
40%, 60% { transform:translate3d(4px,0,0) }
}
@-webkit-keyframes shake {
10%, 90% { transform:translate3d(-1px,0,0) }
20%, 80% { transform:translate3d(2px,0,0) }
30%, 50%, 70% { transform:translate3d(-4px,0,0) }
40%, 60% { transform:translate3d(4px,0,0) }
}
@-moz-keyframes shake {
10%,90% { transform:translate3d(-1px,0,0) }
20%, 80% { transform:translate3d(2px,0,0) }
30%, 50%, 70% { transform:translate3d(-4px,0,0) }
40%, 60% { transform:translate3d(4px,0,0) }
}
</style>
</head>
<body>
<img src="##LINK-GAMBAR###" alt="">
</body>
</html>
Source kode diatas bisa kalian simpan dengan format .html lalu jalankan dibrowser untuk melihat hasilnya, dan jangan lupa ganti kode ##LINK-GAMBAR### dengan link gambar kalian.
Untuk demonya kalian bisa lihat-lihat diblog kenscripts ini, atau cek live demonya dibawah.
Baca : Compress gambar agar ukuran lebih kecil menjadikan blog lebh cepat.
Selanjutnya kiat akan mencoba memasangkannya pada tema blogger efek goyang gambar.
b. Memasang efek goyang pada gambar ditemplate blogger.
Harus diingat setiap template memiliki markup yang berbeda, contoh seperti nama class, id ataupun markup HTMLnya jadi Telitilah dalam memasangnya dan perhatikan catatan dibawah ini.
CATATAN :
1. Semua gambar akan memiliki efek goyang.
2. Tidak semua template blogger bisa memakai efek ini tetapi bisa dicoba dulu, jika memang tidak bisa silahkan berkomentar.
3. Lakukan backup dulu pada templatemu agar lebih aman.
- Masuk ke akun blogger dan pilih tema.
- Pilih Edit HTML dan cari tag </head> dengan bantuan shortcut CTRL + F.
- Copy dan pastekan kode CSS 3 dibawah ini tepat diatas tag </head> tadi yang dicari.
- Simpan dan lihat hasilnya.
<style>
img:hover, .shakeimg:hover {
animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;
-moz-animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;
-webkit-animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;
-o-animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;
transform:translate3d(0,0,0);
backface-visibility:hidden;
perspective:1000px;
}
/* SOURCE KODE EFEK BY KENNY KENSCRIPTS.BLOGSPOT.COM */
@keyframes shake {
10%, 90% { transform:translate3d(-1px,0,0) }
20%, 80% { transform:translate3d(2px,0,0) }
30%, 50%, 70% { transform:translate3d(-4px,0,0) }
40%, 60% { transform:translate3d(4px,0,0) }
}
@-webkit-keyframes shake {
10%, 90% { transform:translate3d(-1px,0,0) }
20%, 80% { transform:translate3d(2px,0,0) }
30%, 50%, 70% { transform:translate3d(-4px,0,0) }
40%, 60% { transform:translate3d(4px,0,0) }
}
@-moz-keyframes shake {
10%,90% { transform:translate3d(-1px,0,0) }
20%, 80% { transform:translate3d(2px,0,0) }
30%, 50%, 70% { transform:translate3d(-4px,0,0) }
40%, 60% { transform:translate3d(4px,0,0) }
}
</style>
Baca : Tempat penyedia dan download gambar terbaik lengkap.
Itulah source kode CSS 3 efek goyang pada objek gambar dan cara pasang pada blogger.
Sebenarnya efek goyang ini bisa dipasang pada semua tag HTML, namun perlu penyesuaian lagi, dan juga menurutku lebih bagis dipasang pada tag img bukan?
Sekian dari saya terima kasih telah berkunjung.