Minggu, 21 Juni 2015

Membuat Gambar Bergerak Dengan Efek Pulse atau Berdenyut

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?

Membuat Gambar Bergerak Dengan Efek Pulse atau Berdenyut

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

Membuat Gambar Bergerak Dengan Efek Pulse atau Berdenyut Rating: 4.5 Diposkan Oleh: ana sriwahyuni

21 komentar:

  1. Efek gambar'a keren .. Coba dulu akh ..:)
    Thq info'a mbak.

    BalasHapus
  2. Wah keren juga kalau bisa bergerak gitu. Itu kalo dibuka via seluler masih terlihat bergerak juga nggak, Mbak?

    BalasHapus
    Balasan
    1. insyaallah bisa mas jika dibuka di samrtphone tapi kalau di ponsel lama atau jadul tidak bisa..

      Hapus
  3. Jadi cakep mbak kupu-kupunya bergerak-gerak kaya mau terbang.. ;)

    BalasHapus
  4. sepertinya asyik sekali ya mbak bisa goyang goyang gitu hehe

    BalasHapus
    Balasan
    1. goyang 25 mah kalah dengan efek ini :D

      Hapus
    2. hihihii.. goyang 25... apalagi goyang domang ya mas :D

      Hapus
  5. wah mau coba saya gunakan diblog saya nih efeknya mbak biar bisa dag dig dug kayak contoh itu

    BalasHapus
    Balasan
    1. hehehee.. silahkan mas tapi jangan sampai bikin permirsa blog yang dag dig dug ya mas..

      Hapus
  6. keren sekali efek pulsenya mbak . mau tak coba diblog saya ah, trims ya mbak

    BalasHapus
    Balasan
    1. silahkan mas Hary.. semoga menyenangkan :)

      Hapus
  7. wah, 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

    BalasHapus
    Balasan
    1. dan sepertinya tidak perlu software untuk membuat gambar bergerak ya mas :)

      Hapus
  8. dag dig dug lihat gambarnya -___-

    BalasHapus
    Balasan
    1. hehehehe.. jadi lebih hidup tentunya mbak Ratna..

      Hapus
  9. dicoba dulu ya mbak, keren banget

    BalasHapus
    Balasan
    1. silahkan mas Rian.. semoga berhasil.. :)

      Hapus
  10. mbak itu durasi detak nya bisa diperlambat gak , kalo terlalu cepat kayanya bisa bikin pusing hehehe :D

    BalasHapus
    Balasan
    1. bisa mas, silahkan diganti pada angka .5s menjadi 1s atau lebih besar..

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia