Cara membuat gambar tertarik keluar menggunakan keyframe animasi CSS3

Posted at 03.38 | in tips dan triks blog

Animasi CSS3 dapat diatur/diselaraskan dengan baik dan dipecah menjadi "frame (bingkai)", terima kasih banyak kita ucapkan kepada@keyframe. Efek animasi ini bekerja ketika mouse kita gerakan/gulirkan ke gambar. Saat ini support dengan browser chrome, safari, firefox dan mungkin IE 10.

View Demo

LANGKAH-LANGKAH:

Masuk ke akun blogger anda -> Klik Drop down menu
Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS berikut tepat diatas kode ]]></b:skin>

.pulloutimage{
  position: relative;
}

.pulloutimage img{
  position: absolute; /* absolute position and stack images inside container */
  left: 0;
}

.pulloutimage img.ondemand{ /*CSS for image shown on demand */
  opacity: 0;
  visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}

.pulloutimage img.original{
  z-index: 1; /* set base z-index of initially shown image */
}

@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
  0%{ /* Start of animation */
  z-index: -1;
  opacity: 0;
  }
  50%{ /* Half way point, move image to right edge of container */
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{ /* 51% point, stack animating image on top of original image */
  z-index: 2;
  }
  100%{ /* Final point, move animating image back so it's on top of original */
  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{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
  -webkit-animation-name:revealfromright; /* specify animation keyframe */
  -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{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
  opacity:0.5;
}

KODE HTML

Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) atau anda bisa meletaknnya di gadget HTML/Javascript
Klik Tata letak -> Tambahkan gadget -> masukan kode didalamnya -> Simpan gadget.

<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="http://i1087.photobucket.com/albums/j479/jalupangna/prabusiliwangi.jpg" />
<img class="ondemand" src="http://i1087.photobucket.com/albums/j479/jalupangna/prabusiliwangi.jpg" />
</div>

<br />
<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu3.jpg" />
<img class="ondemand" src="http://i1087.photobucket.com/albums/j479/jalupangna/ratukidul.jpg" />
</div>

KETERANGAN:

Silahkan ganti link gambar1 pada warna kuning dan gambar2 pada warna hijau diatas dengan link gambar anda.

Happy Blogging...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 03.38

Anda menyukai postingan di atas? Silahkan di share..!

Post Author

Jalupangna

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.