Transisi Menarik dan Unik Lutfi rahman rwxr-xr-x 0 11.42

Filename	Transisi Menarik dan Unik
Permission	rw-r--r--
Author	Lutfi rahman
Date and Time	11.42
Label
Action

Masih ingat tutorial tentang "Membuat Transisi" ? Oke!! Tutorial berikut ini adalah kelanjutan dari tutorial sebelumnya. Dari membuat Transisi Transparan lalu membuat Transisi Gambar ke Gambar dan sekarang kita akan Memodifikasi Transisi dari Gambar ke Gambar. Wah! apa lagi tuh?? pokoknya ikutin aja deh..

• Fading Transitions

"Fading Transitions" kalo di bahasa indonesia-in jadi "Transisi Memudar", Pas sekali seperti namanya.. Transisi gambar yang ini adalah ketika gambar pertama di bayangi kursor, akan memudar perlahan hingga hilang maka yang terlihat hanya gambar kedua dan ketika tidak di bayangi kursor maka yang terjadi adalah sebaliknya. Paham?? Untuk lebih jelasnya coba menuju halaman ini! -- Contoh --


Untuk membuatnya silahkan taruh kode berikut di atas kode ]]>

#fade {
position:relative;
height: 50px;
width: 150px;
margin:0 auto;
}
#fade img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

#fade img.top:hover {
opacity:0;
}

Setelah di Simpan, Taruh kode berikut di Tambah Elemen/ Add Gadget

• Zoom In and Out

Efek yang akan di berikan pada transisinya adalah ketika gambar di bayangi kursor, gambar Pertama akan mengecil dan gambar Kedua akan membesar sehingga hanya terlihat gambar kedua. Untuk lebih jelasnya silahkan lihat di halaman berikut. -- Contoh --

Untuk membuatnya silahkan taruh kode berikut di atas kode ]]>

#zoom {
position:relative;
height: 50px;
width: 150px;
margin:0 auto;
}
#zoom img {
position:absolute;
left:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

#zoom img.top {
-webkit-transform:scale(0,0);
opacity:0;

}

#zoom:hover img.top, #zoom.hover_effect img.top {
opacity:1;
-webkit-transform:scale(1,1);
-webkit-transform-origin: top right;
-moz-transform:scale(1,1);
-moz-transform-origin: top right;
-o-transform:scale(1,1);
-o-transform-origin: top right;
-ms-transform:scale(1,1);
-ms-transform-origin: top right;
transform:scale(1,1);
transform-origin: top right;
}

#zoom:hover img.bottom, #zoom.hover_effect img.bottom {
-webkit-transform:scale(0,0);
-webkit-transform-origin: bottom left;
-moz-transform:scale(0,0);
-moz-transform-origin: bottom left;
-o-transform:scale(0,0);
-o-transform-origin: bottom left;
-ms-transform:scale(0,0);
-ms-transform-origin: bottom left;
transform:scale(0,0);
transform-origin: bottom left;
}

Setelah di Simpan, Taruh kode berikut di Tambah Elemen/ Add Gadget

• Rotation

"Rotation" atau "Perputaran", Sudah tahu seperti apa efeknya? atau sudah dapat di bayangkan?? yak! Berputar! ketika gambar di bayangi kursor, gambar akan berputar hingga menghilang. Lihat contohnya! -- Contoh --

Sama seperti di atas, taruh kode berikut di atas kode ]]>

#rot {
position:relative;
height: 50px;
width: 150px;
margin:10px auto;
}
#rot img {
position:absolute;
left:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

#rot img.top {
-webkit-transform:scale(1,0);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;

}

#rot:hover img.top, #rot.hover_effect img.top {
opacity:1;
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
-o-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);
}

#rot:hover img.bottom, #rot.hover_effect img.bottom {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform:rotate(360deg) scale(0,0);
-moz-transform:rotate(360deg) scale(0,0);
-o-transform:rotate(360deg) scale(0,0);
-ms-transform:rotate(360deg) scale(0,0);
transform:rotate(360deg) scale(0,0);
}

Setelah template di Simpan, taruh kode berikut di Tambah Elemen/ Add Gadget

Catatan: Untuk tulisan yang berwarna hijau, aturlah lebar dan tinggi sesuai gambarnya. Hasil terbaik di lihat melalui Google Chrome dengan resolusi 1280 x 960

Hanya segitu yang bisa saya share. Jika masih pertanyaan, silahkan beri komentar di bawah ini! tapi, tentu saja sesuai dengan kemampuan saya ^^. Keep Share Gan!