Sewaktu membaca komentar mas Abdul pada artikel membuat elemen pembuka, aku sedikit mikir, kayaknya bagus juga kalau trik pada postingan tersebut digabungin dengan event-event keyboard. setelah berEksperimen ria akhirnya selesai juga kodenya. cara ini barusan aku lakuin yaitu menggubungkan Javascript dan css3, event-event keyboard dikendalikan oleh javascript sedangkan transition / efek pergerakan lembut dikendalikan oleh css3. Baiklah silahkan lihat dulu demonstrasinya.
ILUSTRASI
Silahkan tekan Enter untuk membuka dan CTRL+Z untuk menutup.
Baiklah, dibawah ini sumber kodenya.
<script type="text/javascript">
function ker(e){
//Variabel
var x = document.getElementById('x'),
z = document.getElementById('z'),
huruf = e.which;
if(huruf == 13){//jika user menekan enter
x.className += " ghover";//tambahkan class .ghover
z.className += " khover";// dan class .khover
}
if(e.ctrlKey && e.which == 90){//jika user menekan CTRL+Z
x.className = "g";//ganti class menjadi .g
z.className = "k";//dan juga .k
}
}document.onkeydown = ker;//eksekusi kode saat user menekan keyboard
</script>/*
ZTO : Creation
Author : zhinto
*/
.g,.k {
position: fixed;
background: #222;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
z-index: 999999
}
.g {
top: 0;
left: 0;
right: 50%;
bottom: 0;
}
.k {
top: 0;
left: 50%;
right: 0;
bottom: 0;
}
.ghover {
right: 100%;
}
.khover {
left: 100%;
}<div id='x' class='g'></div> <div id='z' class='k'></div>
Masih bersaudara...
1. Menambah kelas dan mengganti kelas dengan javascript
2. Membuat element pembuka
Posting ini juga sekaligus untuk menjawab pertanyaan dari Kang Ismet mengenai pengimplementasian javascript pada posting ini
