Cara Membuat Efek Gambar Bergetar di Blogger

Efek gambar pada laman web, seperti saat kursor diarahkan ke sebuah gambar dan gambar tersebut menghasilkan efek vibrasi atau oscilasi, adalah salah satu elemen visual dinamis yang menarik perhatian. Penggunaan efek semacam ini tidak hanya membuat desain laman lebih interaktif tetapi juga menambah daya tarik visual bagi pengunjung.

Bagi penggemar desain interaktif dan efek visual, efek gambar semacam ini tentu sangat memikat dan layak untuk dieksplorasi lebih lanjut. Menghadirkan elemen-elemen ini bisa menjadi pembeda signifikan dalam meningkatkan pengalaman pengguna di situs Anda.

Untuk mengimplementasikan efek gambar tersebut, Anda memerlukan integrasi beberapa skrip CSS yang harus ditambahkan ke konfigurasi tema. Ini biasanya melibatkan penyuntingan kode HTML, khususnya di platform blog seperti Blogger. Meskipun contoh ini difokuskan pada Blogger, pengguna platform lain dapat melakukan penyesuaian sesuai dengan karakteristik sistem yang mereka gunakan.

Metodologi Implementasi Efek Oscilasi Gambar pada Blog

Mari kita telaah prosedur implementasinya secara bertahap dan sistematis.

1. Langkah pertama, akses dashboard Blogger kalian.

2. Selanjutnya, navigasikan ke menu Tema yang tersedia.

3. Pilih opsi Edit HTML untuk melakukan modifikasi kode.

4. Dalam editor, lakukan pencarian terhadap sintaks ]]></b:skin>:

5. Setelah menemukannya, sisipkan kode CSS berikut tepat di atasnya:

.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}

Setelah penyisipan kode selesai, jangan lupa untuk menyimpan perubahan yang telah kalian lakukan.

Dengan demikian, proses implementasi telah selesai.

Metode ini relatif sederhana, bukan?

Skrip CSS yang telah disisipkan akan langsung berfungsi dan memberikan efek oscilasi pada seluruh gambar yang telah dipublikasikan sebelumnya, tanpa memerlukan pemanggilan skrip tambahan. Hal ini tentu memudahkan kalian, karena tidak perlu melakukan penyuntingan pada setiap gambar yang ingin diberi efek oscilasi ketika membuat sebuah postingan baru.

Namun, bagi kalian yang lebih menyukai pendekatan manual atau ingin melakukan kustomisasi dengan hanya memberikan efek oscilasi pada gambar-gambar tertentu, kalian dapat mengganti skrip di atas dengan alternatif berikut:

.lotus {display:inherit;transform-origin:center center}

.lotus: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)} 
}

.lotus:hover {animation-name:img;animation-duration:0.5s;animation-timing-function:ease-in-out}

Penting untuk diingat bahwa ketika kalian membuat postingan atau menyisipkan gambar dengan metode ini, kalian perlu menambahkan atribut class=”lotus” pada setiap elemen gambar yang ingin diberi efek oscilasi.

Untuk lebih jelasnya, perhatikan contoh struktur HTML berikut:

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

Sangat disarankan agar kalian hanya mengimplementasikan salah satu dari dua skrip yang telah dijelaskan sebelumnya. Hal ini bertujuan untuk menghindari potensi konflik atau error pada tema utama blog kalian.

Jika kalian ingin menerapkan efek oscilasi pada seluruh gambar yang ada di blog, kalian dapat menggunakan kode CSS berikut:

.post-body img:hover {
animation: bergoyang 0.8s;
animation-iteration-count: infinite;
}

@keyframes bergoyang {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

Implementasi efek oscilasi pada gambar dapat meningkatkan daya tarik visual blog kalian secara signifikan. Namun, penting untuk mempertimbangkan keseimbangan antara estetika dan fungsionalitas. Penggunaan efek yang berlebihan dapat mengganggu pengalaman pengguna dan mengurangi fokus pada konten utama.

Selain itu, perlu diperhatikan bahwa tidak semua pengunjung blog akan mengapresiasi efek oscilasi ini. Beberapa pengguna mungkin merasa terganggu atau bahkan mengalami ketidaknyamanan visual. Oleh karena itu, pertimbangkan untuk memberikan opsi kepada pengunjung untuk menonaktifkan efek ini jika diperlukan.

Dalam konteks optimasi kinerja, perlu diingat bahwa penambahan efek animasi dapat berdampak pada kecepatan pemuatan halaman, terutama pada perangkat dengan spesifikasi rendah atau koneksi internet yang lambat. Pastikan untuk melakukan pengujian menyeluruh pada berbagai perangkat dan browser untuk memastikan kompatibilitas dan performa yang optimal.

Lebih lanjut, kalian dapat mengeksplorasi variasi efek lain untuk memperkaya pengalaman visual pengunjung blog. Misalnya, efek zoom, rotasi, atau perubahan opacity saat kursor diarahkan ke gambar. Namun, tetap pertahankan konsistensi dalam penggunaan efek untuk menciptakan identitas visual yang koheren.

Tidak kalah pentingnya, perhatikan aspek aksesibilitas dalam implementasi efek visual ini. Pastikan bahwa pengunjung dengan kebutuhan khusus tetap dapat mengakses dan memahami konten blog kalian tanpa terganggu oleh efek animasi yang diterapkan.

Selalu ikuti perkembangan terbaru dalam teknologi web dan desain UI/UX. Tren dan praktik terbaik dalam dunia desain web terus berkembang, dan penting bagi kalian untuk tetap up-to-date agar dapat memberikan pengalaman terbaik bagi pengunjung blog kalian.