Prinsip dasar
Kotak geser dinamis ini didasarkan pada prinsip dasar yang sama. Tag DIV dengan ".boxgrid" bertindak sebagai jendela setelah Anda meneruskan dua item lainnya pada objek yang ingin Anda "intip". Tidak yakin? Biarkan gambar ini memberi Anda petunjuk:
Setelah memahami prinsip dasar ini, kita dapat menggunakan efek animasi elemen geser untuk mengungkap atau menutupi area yang akan ditampilkan untuk menciptakan efek geser.
Klik untuk melihat pratinjau efeknya Unduh file sumber untuk contoh ini
Langkah Pertama – Dasar-dasar CSS
Pada diagram inspirasi di atas yang memberikan struktur dasar, kita perlu menggunakan sedikit CSS untuk membuatnya menampilkan efek yang diinginkan. CSS berikut mendefinisikan jendela tampilan (.boxgrid) dan menetapkan POSISI default gambar di KIRI dan ATAS, yang sangat penting untuk penjelasan yang tumpang tindih saat menggeser. Dan jangan lupa bahwa overflow:hidden akan memungkinkan hal ini.
.boxgrid{
lebar: 325 piksel;
tinggi: 260 piksel;
margin:10 piksel;
mengapung:kiri;
latar belakang:#161613;
batas: solid 2px #8399AF;
meluap: tersembunyi;
posisi: relatif;
}
.boxgrid img{
posisi: mutlak;
atas: 0;
kiri: 0;
batas: 0;
}
Jika Anda belum siap menggunakan CSS untuk mendapatkan deskripsi yang transparan, Anda dapat langsung melanjutkan ke langkah kedua:
.boxcaption{
mengapung: kiri;
posisi: mutlak;
latar belakang: #000;
tinggi: 100 piksel;
lebar: 100%;
opacity: .8;
/* Untuk IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* Untuk IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
Sekarang, kita perlu menetapkan titik awal default untuk kotak keterangan (menurut saya lapisan lebih baik daripada kotak). Jika Anda ingin menyembunyikannya sepenuhnya saat diinisialisasi, Anda perlu mengatur TOP dan LEFT sesuai tinggi dan lebar jendela Anda (.boxgrid), yang (tentu saja) ditentukan oleh arah yang ingin Anda geser. Anda juga dapat membuatnya hanya menampilkan sebagian saja pada inisialisasi, seperti yang diberikan oleh .caption dan .boxcaption ini (yang ditentukan oleh CSS):
.captionfull .boxcaption {
atas: 260;
kiri: 0;
}
.caption .boxcaption {
atas: 220;
kiri: 0;
}
Sumber: Favorit Bahagia