CSS Eksperimen - 04-4 Elemen Sliding Door

1. Sliding Door
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

2. Pendahuluan
Materi sebelumnya telah dibahas mengenai card flip. Sekarang Kita
coba bahas yang mirip dengan card flip yaitu efek sliding door.
Jika Anda mengikuti materi sebelumnya, maka Anda bisa memakai file
yang sebelumnya telah dibuat dengan sedikit modifikasi.

3. Sliding door ini sederhana. Elemen umumnya akan berbentuk persegi
dan punya dua sisi. Ketika elemen ini dihover, elemen akan
menampilkan sisi belakangnya dengan cara menggeser elemen yang
ada di depannya sehingga elemen yang belakang tampil.
hover → geser
Kelakuan Sliding Door
Depan Belakang
Gese
r Belakang

4. Implementasi Sliding Door - 1
Pertama kita buat kerangka HTML-nya
terlebih dahulu.
Elemen konten membutuhkan
penampung dalam hal ini adalah door-
container yang berguna untuk
membungkus isinya yaitu door-content
(konten elemen) dan door-cover (tutup
depan).
Masing-masing elemen ini diwakili oleh
tag div dengan nama kelas yang
ditentukan.
HTML
<div class="door-container">
<div class="door-content">
<h1>Halo</h1>
</div>
<div class="door-cover">
<h1>Hover</h1>
</div>
</div>

5. Implementasi Sliding Door - 2
Kita akan set terlebih dahulu default style
yang ada supaya tiap perubahan dapat
terlihat jelas.
Terutama jika Anda mencobanya dengan
menggunakan aplikasi web seperti
jsfiddle, codepen, atau aplikasi lainnya.
CSS
.body {
background: #333;
text-align: center;
color: white;
}
.h1 {
margin: 0;
}

6. Implementasi Sliding Door - 3
Kita perlu memastikan ketiga elemen
sliding door punya ukuran yang sama
yaitu 200x200 piksel di Style yang lain.
Kemudian set style door-container
sebagai penampung. Posisi diset relatif
dan sembunyikan elemen yang melintas
keluar (door-cover yang bergeser) dengan
overflow hidden.
CSS
.door-container {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
margin: 10px;
border: solid 1px #555;
}

7. Implementasi Sliding Door - 4
CSS
.door-content {
width: 100%; height: 100%;
color: #000;
background: #e0e0e0;
box-shadow: 1px 1px 5px rgba(0,0,0,0.3)
inset;
}
.door-cover {
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
transition: left 0.3s ease;
background: #20471A;
}
Berikan style untuk masing-masing door-
cover dan content.
Pastikan door cover tepat ada di atas
door-content dengan memberikan posisi
absolut, top 0, dan left 0. Berikan juga
style transisi untuk animasi ketika digeser.

8. Implementasi Sliding Door - 5
CSS
.door-container:hover .door-cover {
left: -100%;
}
Sentuhan terakhir adalah style yang
memberi aksi ketika door-cover dihover.
Door-cover akan bergeser ke kiri dan
menampilkan elemen di bawahnya yaitu
door-content.
Hal ini dilakukan dengan mendefinisikan
“ketika door-container dihover, maka
door-cover akan …”, dalam hal ini digeser
ke kiri.

9. Finalisasi
Setelah sliding door telah selesai dibuat, Anda bisa mengubah dan
menyesuaikannya sesuai dengan selera Anda.
Anda bisa menambah menu, mengubah warna, ukuran, dll sesuai
kreativitas Anda.
Contoh dapat dilihat pada Codepen Kuliahkita