Beberapa waktu yang lalu saya pernah membuat artikel tentang cara membuat gambar bergerak dengan beberapa efek yaitu berkedip atau blink, membesar jika disorot atau didekati oleh cursor mouse dan beberapa efek lainnya yang memiliki tampilan berbeda dari setiap efek yang ditimbulkannya. Dan salah satu efek terbaru dari gambar bergerak yang dapatkan adalah efek pulse atau berdenyut. Dan jika dilihat dari DEMO dibawah ini sepintas gambar bergerak dengan efek pulse ini hampir sama dengan efek Blink atau bisa juga perpaduan antara efek Zoom dan Blink yang bergerak lebih cepat secara konstan. Namun jika dilihat dari kode masing-masing efek baik itu efek pulse atau berdenyut, blink atau berkedip dan zoom atau membesar tidak memiliki persamaan yang berarti malah berdiri sendiri dengan pengaturan tag kode CSS didalamnya. Apakah membuat gambar bergerak dengan efek berdenyut ini menggunakan CSS dan Script?
Jika teman-teman blogger ini membuat gambar bergerak dengan efek pulse kedalam blog kalian semua, cobalah menggunakan cara yang saya bagikan berikut dibawah ini. Namun sebelum membuat efek berdenyut tersebut, alangkah baiknya jika teman-teman melihat juga dari efek Blink yang saya bagikan sebelumnya di Membuat Efek Blink dan bandingkan dengan efek berdenyut dibawah ini
KODE CSS GAMBAR BERGERAK DENGAN EFEK PULSE
<style type="text/css">
.pulseit{display:inline-block;-webkit-animation:pound .5s infinite;animation:pound .5s infinite;}
@keyframes pound {from {transform:none;}50% {transform:scale(1.4);}to {transform:none;}}
</style>
Untuk membuat gambar bergerak dengan efek pulse atau berdenyut seperti yang terlihat pada gambar, silahkan salin kode CSS diatas kedalam kode template blog anda. Kode CSS tersebut bebas diletakkan dimana saja, di pengeditan template, didalam widget blog atau didalam penulisan artikel langsung. Selain digunakan untuk memberikan fungsi gerak dengan efek pulse pada gambar, triks ini juga bisa digunakan untuk teks seperti yang terlihat dibawah ini;
Dag.. Dig.. Dug...
Jika teman-teman tertarik untuk membuat gambar bergerak dengan efek pulse seperti yang terlihat pada demo diatas baik itu untuk gambar atau teks, silahkan gunakan kode CSS diatas. Dan tidak perlu kuatir mengenai penggunaan kode CSS pada efek ini karena tidak akan mempengaruhi loading blog sama sekali dan yang pasling utama adalah tidak ada penggunaan script didalamnya. Terimakasih
Jika teman-teman blogger ini membuat gambar bergerak dengan efek pulse kedalam blog kalian semua, cobalah menggunakan cara yang saya bagikan berikut dibawah ini. Namun sebelum membuat efek berdenyut tersebut, alangkah baiknya jika teman-teman melihat juga dari efek Blink yang saya bagikan sebelumnya di Membuat Efek Blink dan bandingkan dengan efek berdenyut dibawah ini
KODE CSS GAMBAR BERGERAK DENGAN EFEK PULSE
<style type="text/css">
.pulseit{display:inline-block;-webkit-animation:pound .5s infinite;animation:pound .5s infinite;}
@keyframes pound {from {transform:none;}50% {transform:scale(1.4);}to {transform:none;}}
</style>
Untuk membuat gambar bergerak dengan efek pulse atau berdenyut seperti yang terlihat pada gambar, silahkan salin kode CSS diatas kedalam kode template blog anda. Kode CSS tersebut bebas diletakkan dimana saja, di pengeditan template, didalam widget blog atau didalam penulisan artikel langsung. Selain digunakan untuk memberikan fungsi gerak dengan efek pulse pada gambar, triks ini juga bisa digunakan untuk teks seperti yang terlihat dibawah ini;
Dag.. Dig.. Dug...
Jika teman-teman tertarik untuk membuat gambar bergerak dengan efek pulse seperti yang terlihat pada demo diatas baik itu untuk gambar atau teks, silahkan gunakan kode CSS diatas. Dan tidak perlu kuatir mengenai penggunaan kode CSS pada efek ini karena tidak akan mempengaruhi loading blog sama sekali dan yang pasling utama adalah tidak ada penggunaan script didalamnya. Terimakasih
Efek gambar'a keren .. Coba dulu akh ..:)
BalasHapusThq info'a mbak.
silahkan mas Isam.. :)
HapusWah keren juga kalau bisa bergerak gitu. Itu kalo dibuka via seluler masih terlihat bergerak juga nggak, Mbak?
BalasHapusinsyaallah bisa mas jika dibuka di samrtphone tapi kalau di ponsel lama atau jadul tidak bisa..
HapusJadi cakep mbak kupu-kupunya bergerak-gerak kaya mau terbang.. ;)
BalasHapusiyalah masak iyadong
Hapussepertinya asyik sekali ya mbak bisa goyang goyang gitu hehe
BalasHapusgoyang 25 mah kalah dengan efek ini :D
Hapushihihii.. goyang 25... apalagi goyang domang ya mas :D
Hapuswah mau coba saya gunakan diblog saya nih efeknya mbak biar bisa dag dig dug kayak contoh itu
BalasHapushehehee.. silahkan mas tapi jangan sampai bikin permirsa blog yang dag dig dug ya mas..
Hapuskeren sekali efek pulsenya mbak . mau tak coba diblog saya ah, trims ya mbak
BalasHapussilahkan mas Hary.. semoga menyenangkan :)
Hapuswah, keren mba, jadi seperti gambar Gif bergerak ya mba, berarti kalo dipasang dipostingan blog tinggal copy code css nya saja ya mba trs dipasang di dlm postingan ? ... nanti saya coba ah hehehe
BalasHapusdan sepertinya tidak perlu software untuk membuat gambar bergerak ya mas :)
Hapusdag dig dug lihat gambarnya -___-
BalasHapushehehehe.. jadi lebih hidup tentunya mbak Ratna..
Hapusdicoba dulu ya mbak, keren banget
BalasHapussilahkan mas Rian.. semoga berhasil.. :)
Hapusmbak itu durasi detak nya bisa diperlambat gak , kalo terlalu cepat kayanya bisa bikin pusing hehehe :D
BalasHapusbisa mas, silahkan diganti pada angka .5s menjadi 1s atau lebih besar..
Hapus