31.3.14
27
Image Effect
Keyframes Image Effect

Efek Keyframes Show Pada Gambar Hover - Mendesain Gambar atau sekedar mengubah tampilan gambar menjadi seakan hidup itu banyak yang melakukannya dengan aplikasi photoshop, namun efek gambar kali ini saya menggunakan kode elemen HTML yang sudah tidak asing lagi bagi kita yaitu KEYFRAMES, yang saya padukan dengan efek hover sebagai penggerak gambar

@keyframes showMe {
      0%  { visibility: visible; z-index: 100; }
 12.5%  { visibility: visible; z-index: 100; }
    25%  { visibility: hidden; z-index: 0; }
  100%  { visibility: hidden; z-index: 0; }
}

Artikel terkait -

Seperti LAYAR TANCAP yang hanya menggunakan klise film role yang disorot dengan lensa proyektor mengarah kelayar, maka gambar akan bergerak layaknya seperti menonton seri drama, karena pada blog tidak ada proyektornya saya menggunakan panah mouse untuk menggerakkan gambar (Pointer Hover) seperti yang terlihat pada tombol DEMO SHOW dibawah ini



DEMO SHOW



Pembetukan Rangka elemen CSS
Disini saya hanya menggunakan 5(lima) gambar sebagai contoh, selebihnya Anda bisa menambahkan gambar sebanyak yang anda mau, atau mau membuat film seperti layar tancap mungkin, hehe..!! Kode berikut sudah saya susun dengan kecepatan slide gambar dengan animation-delay: 0.1s (sangat cepat)
Berikut kodenya -


.hs-wrapper{
  width: 333px;
  height: 500px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.5);}

.hs-wrapper img{
  top: 0px;
  left: 0px;
  position: absolute;
  -webkit-animation: showMe 0.8s linear infinite 0s forwards;
  -moz-animation: showMe 0.8s linear infinite 0s forwards;
  -o-animation: showMe 0.8s linear infinite 0s forwards;
  -ms-animation: showMe 0.8s linear infinite 0s forwards;
  animation: showMe 0.8s linear infinite 0s forwards;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  -ms-animation-play-state: paused;
  animation-play-state: paused;}

.hs-wrapper img:nth-child(1) {z-index: 9;}
.hs-wrapper img:nth-child(2){
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  -ms-animation-delay: 0.1s;
  animation-delay: 0.1s;
  z-index: 8;}

.hs-wrapper img:nth-child(3){
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  animation-delay: 0.2s;
  z-index: 7;}

.hs-wrapper img:nth-child(4){
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  -ms-animation-delay: 0.3s;
  animation-delay: 0.3s;
  z-index: 6;}

.hs-wrapper img:nth-child(5){
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  animation-delay: 0.4s;
  z-index: 5;}
//gambar selanjutnya
. . .

.hs-wrapper:hover img{
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  -ms-animation-play-state: running;
  animation-play-state: running;}

@-webkit-keyframes showMe {
      0% { visibility: visible; z-index: 100; }
 12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
  100% { visibility: hidden; z-index: 0; }}

@-moz-keyframes showMe {
      0% { visibility: visible; z-index: 100; }
 12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
  100% { visibility: hidden; z-index: 0; }}

@-o-keyframes showMe {
      0% { visibility: visible; z-index: 100; }
 12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
  100% { visibility: hidden; z-index: 0; }}

@-ms-keyframes showMe {
      0% { visibility: visible; z-index: 100; }
 12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
  100% { visibility: hidden; z-index: 0; }}

@keyframes showMe {
      0% { visibility: visible; z-index: 100; }
 12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
  100% { visibility: hidden; z-index: 0; }}

Tahap Akhir elemen HTML
Pada kode HTML berikut, silahkan Anda ganti gambar dengan URL-gambar Anda, namun penting untuk diketahui agar gunakan gambar dengan format [dot]jpg dengan rotasi 333x500px, dan selebihnya tambahkan gambar sebayak yang Anda mau sesuai keinginan

<div class="hs-wrapper">
<img alt="image01" src="http://image01.jpg" />
<img alt="image02" src="http://image02.jpg" />
<img alt="image03" src="http://image03.jpg" />
<img alt="image04" src="http://image04.jpg" />
<img alt="image05" src="http://image05.jpg" />
</div>


Jika Anda pernah melihat ada sebuah iklan di-TV, yang mana ada anak kecil menggambar detik-detik perubahan kepompong menjadi kupu-kupu, 1 gambar 1 halaman dan setelah lembaran halaman dibuka secara cepat satu per satu, maka gambar tersebut seakan menggambarkan peristiwa perubahan kupu-kupu itu, nah dari sanalah ide ini muncul sehingga saya posting untuk sahabat semua pecinta SAHABAT BLOGGER 77.

Semoga tutorial ini dapat meng-inspirasi sahabat semua. Terimakasih..!! sampai ketemu diartikel saya selanjutnya tentang Efek Hover Gambar Dengan Desain Buka Tutup

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Efek Keyframes Show Pada Gambar Hover
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

27 komentar

  1. wah mbk Devy bener-bener kreatif, saya lihat demonya bagus sekali. tapi saya masih kurang paham dengan pemasangan secriptnya..

    BalasHapus
    Balasan
    1. mohon maaf mas, script dan CSS beda mas, saya jadi semakin bingung scrip mana yang mas maksud, hehehe...
      kalau pemasangan CSS letakkan diatas kode ]]</b:skin> dan HTML-nya terserah mas mau ditaruh dimana. jika pada sidebar letakkan pada gadget HTML/javaScript, sedangkan untuk postingan letakkan pada mode penulisan HTML bukan compose

      Hapus
  2. sayangmya saya belum sempet liat demonya
    soale lagi bw by hp nih mbak.. :)
    nanti sy coba lagi lewat pc deh..

    BalasHapus
  3. ko' bisa bgtu ya...padahla cuma huruf miring,simbol dst,..yg dsusun.,

    BalasHapus
    Balasan
    1. kode-kode HTML kan hanya berupa simbol mas, dan markup sebagai pemanggil efeknya (class)

      Hapus
  4. saya lihat demonya gambarnya jadi berubah - ubah gitu yaa mbak, harus di coba nih scripnya
    thanks mbak :))

    BalasHapus
  5. Wah kok bisa berubah-ubah begitu ya... keren keren. (h)

    BalasHapus
  6. Wah, dah lama nih gak liat skrip! Hoho

    BalasHapus
    Balasan
    1. buka HTML - edit HTML disana pasti banyak script mas,..hehehe..(bercanda)

      ok dech silahkan dilihat-lihat mas

      Hapus
  7. Keren banget Mbak Devy. Sekolahnya di mana sih?

    Itu biasanya diaplikasikan untuk iklan ya?

    Eh kalau dipasang di halaman blog, itu berat di loading gak?

    BalasHapus
    Balasan
    1. blognya mbak juga keren kok, semua blog sahabat yang lain keren buat saya, tetapi apa hubungannya sama sekolah ya,,hehehe...

      gambar untuk iklan biasanya pakai CSS transisi yang otamatis tanpa elemen paused, jadi gambar akan secara otomatis berganti, seperti artikel terkait yang saya tandai pada link diatas mbak

      kalau masalah loading, saya menggunakan gambar dengan format jpg, yang terlebih dahulu saya upload ke picasa album,lalu saya upload ke postingan dari picasa, jadi saya rasa cukup cepat untuk muat loading gambarnya

      Hapus
  8. mantap gan,, lanjutkan sharingnya ya

    BalasHapus
  9. wah luar biasa hasilnya
    gambarnya berganti2 seperti flash..
    cuma cara membuatnya lumayan rumit ya mbak..?
    Pake kode-kode begitu rumit hehehe :)


    BalasHapus
    Balasan
    1. susunan kodenya sudah saya permudah mas, kalau mau diedit ubah yang saya beri warna orange, setelah diubah baru tinggal dicopy. gak ada yang rumit kok, mungkin belum terbiasa saja kok, hehehe

      Hapus
  10. wow demonya keren banget nih mbak,izin save cara pembuatan efek key frames yambak.kapan2kalau membutuhkan tinggal nggunain

    BalasHapus
    Balasan
    1. tapi kayaknya nggak valid CSS3 yambak soalnya ada kode ini:-webkit-

      Hapus
    2. lebih ke pembacaan peramban mas, jika ingin valid CSS3 cukup abaikan kode itu, karena tidak berpengaruh terhadap efeknya,
      saya menggunakan kode level-2 CSS, karena menggunakan cukup gambar yang banyak, sehingga terpikir juga dengan kecepatan muat gambar

      Hapus
    3. o gitu ya,makasih penjelasannya mbak,oya sekalian izin follow ya.kalau ada waktu mohon difollback.thanks atas kerjasamanya

      Hapus
    4. seip,follback sudah tersimpan,,moga bisa bekerjasama tentang pemahaman bahasa markup ya sob, heheh..belajar dan terus belajar pasti kita bisa, ya gak sob

      Hapus
  11. lihat demonya keren sekali mbak...sangat cocok buat blog yang menggunakan banyak gambar seperti blog saya...saya bm dulu ya mbak

    BalasHapus
  12. wah keren mbak devy.. kode css nya lumayan banyak juga ya mbak.. tapi sesuai dengan hasilnya ya mbak.. boleh nih di praktekin mbak..? makasih ya..

    BalasHapus
  13. kode cssnya lumayan panjang ya mba :)

    BalasHapus
  14. wih keren mbak, gambar gonta ganti kalo disentuh mouse

    BalasHapus
  15. ini ilmu tingkat tinggi mbak dan saya belum nutut utk menguasainya, ijin belajar ya mbak :)
    makasih telah berbagi ilmu x-)

    BalasHapus
  16. keren nih, tinggal ngatur kecepatan slide nya saja

    BalasHapus
  17. cocok sekali utuk situs video

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK