Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi

Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi
Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi – bisa dikatakan kurang lebih agak mirip dengan efek peel back pada gambar di blog yang sudah pernah saya posting pada sebelumnya. Efek pull out gambar dengan css3 keyframe animasi ini merupakan perpaduan dari dua gambar yang terdapat palam satu posisi yang tepatnya pada gambar utama masih terdapat backing gambar yang terletak dibelakangnya dan apabila pada gambar utama tersebut tersentuh oleh mouse maka akan hover dan pada backing gambar akan berjalan secara halus dari sisi belakang kemudian ke arah samping kanan lalu menggantikan posisi gambar utama pada posting blog. Untuk lebih jelas dan detailnya maka bisa dilihat pada halaman demo dan berikut adalah tutorial untuk cara membuat Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi di blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).
Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi
.pulloutimage{
  position: relative;
}

.pulloutimage img{
  position: absolute;
  left: 0;
}

.pulloutimage img.ondemand{
  opacity: 0;
  visibility: hidden;
}

.pulloutimage img.original{
  z-index: 1;
}


@-webkit-keyframes revealfromright{
  0%{
  z-index: -1;
  opacity: 0;
  }
  50%{
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{
  z-index: 2;
  }
  100%{
  left: 0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-moz-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-ms-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}


.pulloutimage:hover img.ondemand{
  -webkit-animation-name:revealfromright;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
 
  -moz-animation-name:revealfromright;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
 
  -ms-animation-name:revealfromright;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
 
  animation-name:revealfromright;
  animation-duration: 1s;
  animation-iteration-count: 1;
 
  visibility:visible;
  opacity:1;
  box-shadow: 8px 8px 15px gray;
  z-index:2;
}

.pulloutimage:hover img.original{
  opacity:0.5;
}
3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:
<div class="pulloutimage" style="height:250px">
<a href="http://mas-andes.blogspot.com" target="_blank"><img class="original" height="250" src="http://3.bp.blogspot.com/-ePk4QykRo0c/UXLkrZ5b7PI/AAAAAAAAEEo/Gj0KiyfxEsc/s320/cecilia-cheung-11.jpg" width="320" /></a>
</div>
Keterangan:
Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.
Ganti URL gambar dengan yang di inginkan.
Untuk width dan height silahkan sesuaikan selera.


DEMO:

Berlangganan artikel via email

15 Response to "Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi"

SOLARRRRR....
manap.... mas.... :)

Balas

waww ....keyen mas. 1 frame 1 poto...nda berat loadingnya mas?

Balas

waww ....keyen mas. 1 frame 1 poto...nda berat loadingnya mas?

hehehe...

mantap mas, makasi sharing ilmunya...dan foto yg dicontohkan pun enak dipandang :D

Balas

langsung dicoba sob..

Blogwalking sobat....Happy Blogging....

Balas

kece banged ..
emng udah mbah'nya yg kaya beginian deh mas andes ..
bisa dunk ajarin :P

Balas

wah keren tutorialnya mas,,lam knal ya

Balas

sebelum upload poto, di compres dulu potonya, biar nggak berat blognya, artikel yang bagus ini mas andes, tapi nggak cocok dengan blog saya. makasi ya bermanfaat ni, ijin bookmark

Balas

sangat mantap tutorialnya sobat, ijin save dulu sobat, suatu saat perlku dicoba nih
tutorial yg mantap sobat
terima kasih sudah berbagi

Balas

Bagus teritorialx sobat...

Balas

.: maknyuz kawan...^_^

Balas

css3 itu adobe macromedia flashnya ya gan ?

Balas

loadnya gimana gan untuk blog sendiri?

Balas

oke mantab gan ane buat referensi aje nih..

Balas

asyik.... thx sharenya ya gan :D

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi" ini bermanfaat, share ke jejaring sosial.
Konversi Kode