Menarik Gambar dengan CSS3 keyframe Animation | Buku Catatan si Ugi

Home › Blogs Tutorial › CSS › Effects Gambar › Widgets › Menarik Gambar dengan CSS3 keyframe Animation

Sebuah animasi dapat diciptakan dengan CSS3. Dengan menggunakan CSS3 @keyframes anda dapat membuat sesuatu yang unik, salah satunya menarik sebuah gambar yang tersembunyi dan menampilkannya keluar saat mouse rolls over diatas gambar utama.


Demo :
Letakan cursor diatas gambar...











Berikut ini adalah Kode lengkap untuk membuat Pull Out Image.
Full Kode

<html>
<head>

<!------------------------------Kode CSS------------------------------>

<style>

.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;
}

</style>

</head>
<body>

<!------------------------------Kode HTML------------------------------>

<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="https://sites.google.com/site/archivesiugi/javascr/Foto2081.jpg" />
<img class="ondemand" src="https://sites.google.com/site/archivesiugi/javascr/Foto2051.jpg" />
</div>

<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="https://sites.google.com/site/archivesiugi/javascr/PB131335.JPG" />
<img class="ondemand" src="https://sites.google.com/site/archivesiugi/javascr/PB131336.JPG" />
</div>

</body>
</html>

Untuk pemasangannya lihat seperti contoh dalam tombol spoiler diatas.

sumber: dynamicdrive

1 komentar:



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan