How to Create a Moving or Shaking Image Effect on a Blog

How to Create a Moving or Shaking Image Effect on a Blog

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.

Cara Membuat Gambar Bergerak di Artikel Blog

Cara membuat gambar bergerak di Blog? Apa mungkin?

Menampilkan sebuah image gambar yang merupakan bagian penting dari content artikel blog dapat membuat tampilan artikel lebih mudah dipahami pembaca, disamping lebih kaya. Gambar pada sisi tersebut, dapat mendukung penjelasan yang ada pada artikel.

Artikel ini tidak menjelaskan apa fungsi gambar terhadap konten blog, melainkan artikel yang menjabarkan tentang cara membuat gambar pada artikel blog bergerak. Namun, gerak gambar ini sederhana saja, yaitu mulai dari sisi kanan artikel blog, ke arah kiri. Dalam HTML gerakannya type scroll.

Bagaimana cara membuat gambar bergerak di artikel Blog?

Pertanyaan tentang cara membuat gambar bergerak pada artikel blog, dapat dijawab dengan penjelasan berikut:

Buatlah posting atau artikel blog dengan format html-nya (bukan compose)
Buatlah sebuah marquee "<marquee><img src="taruh url gambar disini"></marquee>
Sisipkan url gambar pada tag marquee di atas (Baca: Ganti tulisan berwarna biru dari marquee di atas dengan url gambar yang dikehendaki). Bila Anda Kesulitan mengetikkan url gambar yang biasanya panjang dan rumit, bisa dengan copy paste.

Selesai. Langkah membuat gambar bergerak dengan marquee telah diselesaikan. Bagaimana menurut Anda? Apakah ada penjelasan lain yang berhubungan dengan membuat gambar bergerak di artikel Blog? Silakan diberi masukkan di kolom komentar.

Demikian artikel cara membuat gambar bergerak di artikel Blog