Cara Membuat Efek Gambar Bergerak atau Bergoyang di Blog

GEMA.MY.ID

Thursday, October 8, 2020

Cara Membuat Efek Gambar Bergerak atau Bergoyang di Blog - Setelah seminggu vakum membuat tulisan di blog, saya akhirnya kembali dan akan memberikan sedikit informasi tentang tutorial cara membuat efek gambar bergerak atau bergoyang di blog.

Mungkin Anda sering berkunjung ke salah satu blog terkenal Indonesia yaitu Igniel.com. Nah, pada template yang digunakan tersebut, Anda pasti pernah melihat efek gambar yang selalu bergerak atau bergoyang saat kursor diarahkan ke gambar tersebut bukan?

Selain sebagai modernisasi fitur blog dari waktu ke waktu, efek tersebut kini sudah banyak digunakan oleh blogger tanah air (mungkin juga luar negeri) sebagai salah satu cara yang digunakan untuk menarik minat para pembaca.

Untuk menggunakan efek tersebut, setidaknya dibutuhkan skrip CSS yang nantinya akan ditempatkan di bagian HTML template. Setelah itu, Anda hanya perlu memanggil skrip tersebut agar bisa digunakan sesuai dengan fungsinya.

Daripada panjang lebar untuk memenuhi standar minimal kata wkwk, ikuti langkah-langkah berikut ini:

Cara Membuat Efek Gambar Bergerak atau Bergoyang di Blog

Karena saya menggunakan platform Blogger untuk penulisan, maka tutorial ini akan mengikuti alur berdasarkan sistem Blogger itu sendiri. Bagi Anda yang merupakan pengguna WordPress, silahkan mengikuti tutorial ini dengan tetap mengacu pada langkah di bawah ini:

Masuk ke BLOGGER
Pilih menu TEMA
Pilih EDIT HTML
Tempel di atas ]]></b:skin>:

.post-body img {display:inherit;transform-origin:center center}
img:hover img {animation-play-state:running}
@keyframes img {
  20% {transform: translate(-1px, -5px) rotate(2.5deg)}
  40% {transform: translate(5px, 1px) rotate(-2.5deg)}
  60% {transform: translate(-1px, -5px) rotate(2.5deg)}
  80% {transform: translate(5px, 1px) rotate(-2.5deg)}
  0%, 100% {transform: translate(0, 0) rotate(0)} 
}
img:hover {animation-name:img;animation-duration:0.5s;animation-timing-function:ease-in-out}

Pilih SIMPAN
Selesai.

Skrip CSS di atas bisa langsung digunakan tanpa harus melakukan pemanggilan skrip terlebih dahulu. Jadi, Anda tidak susah-susah lagi mengedit setiap gambar yang akan diberikan efek bergerak.

Apabila hanya ingin memberikan efek bergerak pada gambar tertentu, silahkan ganti skrip di atas dengan skrip berikut:

.ferisp {display:inherit;transform-origin:center center}
.ferisp:hover .ferisp {animation-play-state:running}
@keyframes .ferisp {
  20% {transform: translate(-1px, -5px) rotate(2.5deg)}
  40% {transform: translate(5px, 1px) rotate(-2.5deg)}
  60% {transform: translate(-1px, -5px) rotate(2.5deg)}
  80% {transform: translate(5px, 1px) rotate(-2.5deg)}
  0%, 100% {transform: translate(0, 0) rotate(0)} 
}
.ferisp:hover {animation-name:img;animation-duration:0.5s;animation-timing-function:ease-in-out}

Catatan

Untuk melakukan pemanggilan, tambahkan atribut class="ferisp" di setiap HTML gambar. Contohnya:

<img class="ferisp" alt="#" data-original-height="#" data-original-width="#" src="#" title="#" />

Untuk mengubah kecepatan pergerakan, ubah nilai dari kode animation-duration: 0.5s;
Pilih salah satu skrip di atas sesuai dengan kebutuhan berdasarkan jenis fungsinya. Jangan menggunakan secara bersamaan untuk menghindari bentrok.

Demo

Demo	tinyurl.com/y2dfgno7

Penutup

Sebagai seorang blogger, sudah sepatutnya untuk memberikan konten tulisan yang terbaik kepada semua pembaca. Jenis tampilan yang terbaik tersebut bisa seperti tulisan yang lengkap dan mendalam, mudah dipahami, serta gambar yang menarik.

Ingat, gambar adalah salah satu komponen yang paling banyak menarik minat para pembaca. Oleh karena itu, gunakanlah gambar yang memang terbaik sesuai dengan topik yang sedang dibahas.

Cukup sekian artikel tentang Cara Membuat Efek Gambar Bergerak atau Bergoyang di Blog ini, Terima kasih.

Cancel