Cara Membuat Efek Keren Gambar Bergoyang Di Blogspot

Cara Membuat Efek Keren Gambar Bergoyang Di Blogspot - Setelah sepekan vakum membuat goresan pena di blog, aku alhasil kembali dan akan menawarkan sedikit info ihwal bimbingan cara membuat efek gambar bergerak atau bergoyang di blog.

Mungkin Anda sering berkunjung ke salah satu blog terkenal Indonesia yakni Igniel.com. Nah, pada template yang dipakai tersebut, Anda pasti pernah melihat imbas gambar yang selalu bergerak atau bergoyang ketika kursor diarahkan ke gambar tersebut bukan?

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

Baca Juga: Cara Membuat Thumbnail Postingan Blog Mirip

Untuk menggunakan imbas tersebut, setidaknya diharapkan skrip CSS yang nantinya akan diposisikan di bab HTML template. Setelah itu, Anda cuma perlu mengundang skrip tersebut agar mampu digunakan sesuai dengan fungsinya.

Daripada panjang lebar untuk menyanggupi persyaratan minimal kata wkwk, ikuti tindakan berikut ini:

Cara Membuat Efek Gambar Bergerak atau Bergoyang di Blog

Karena aku menggunakan platform Blogger untuk penulisan, maka panduan 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 pribadi dipakai tanpa harus melaksanakan pemanggilan skrip terlebih dahulu. Jadi, Anda tidak sulit-sulit lagi mengedit setiap gambar yang akan diberikan efek bergerak.

Apabila hanya ingin menunjukkan imbas 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

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

class="ferisp"

alt="Cara Membuat Efek Gambar Bergerak atau Bergoyang di Blog Cara Membuat Efek Gambar Bergerak atau Bergoyang di Blog"block">#" data-original-height="#" data-original-width="#" src="#" title="Cara Membuat Efek Gambar Bergerak atau Bergoyang di Blog"block">#" />

Untuk mengubah kecepatan pergerakan, ubah nilai dari aba-aba animation-duration: 0.5s;

Pilih salah satu skrip di atas sesuai dengan kebutuhan menurut jenis fungsinya. Jangan menggunakan secara bersamaan untuk menghindari bentrok.

Demo

Demo	tinyurl.com/y2dfgno7

Penutup

Sebagai seorang blogger, sudah sepatutnya untuk memperlihatkan konten goresan pena yang terbaik kepada semua pembaca. Jenis tampilan yang terbaik tersebut bisa seperti tulisan yang lengkap dan mendalam, gampang diketahui, serta gambar yang menawan.

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

Baca Juga: Cara Mengetahui Kode Warna Gambar dengan Aplikasi Color Picker

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

Baca Juga