Unlock Effect With Css3 And Javascript

Maaf sebelumnya buat mas Abdul ada 2 komentarnya yang masuk ke Tong Spam jadi terpaksa aku hapus, berhubung waktu itu mas Abdul memberi saran/masukan pada postingan Javascript dan css3 opening yaitu harus adanya tombol/button untuk diklik agar pengunjung juga tidak bingung, karena memang pada postingan tersebut cara eksekusi fungsinya harus menggunakan event keyboard. Nah untuk trik yang kali ini aku udah edit lagi kodenya dan memberi tombol untuk diklik dan saat tombol diklik maka fungsinya akan langsung dieksekusi.

Coding kali ini juga masih sama dengan coding yang kemarin yaitu memanfaatkan kecanggihan Javascript dan css3 dimana jika kedua kode tersebut digabungkan efeknya gak jauh beda dengan jquery animate. sebenernya cara ini dulu pernah aku coba tapi menggunakan Jquery. Ok Disini aku menuliskan dua fungsi yang pertama fungsi untuk membuka elemen dan kedua untuk menutup elemen, oh iya untuk menutup elemen ini aku tetap memanfaatkan event keyboard CTRL+Z.

ILUSTRASI

//Opening script @zhinto
// # zhinto.blogspot.com
function buka(){
var x = document.getElementById('x'),
    z = document.getElementById('z'),
    g = document.getElementById('g');
x.className += " ghover";
z.className += " khover";
g.className += " h";
}
function tok(e){
if(e.ctrlKey && e.which == 90){
x.className = "g";
z.className = "k";
g.className = "f";
}
}
window.onload = function(){
document.getElementById('g').onclick = buka;
document.onkeydown = tok;
}

.g,.k,.f {
z-index: 99999;
position: fixed;
}
.g,.k {
background: #111 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAADFBMVEUSEhIAAAAhISElJSW1pfD9AAAAU0lEQVR42oWQ0QrAIAwD5/z/f3a7Fg4lYPpg054RfNBQv2PwHYjBy3AO2qoLmTNVIrfM2XUlFSt7PbZC+2bbDuWN8plEkjET1eIk+S9JfCYNMXMB2pgBCSyP2H8AAAAASUVORK5CYII=");
-moz-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.g {
top: 0;
left: 0;
right: 50%;
bottom: 0;
}
.k {
top: 0;
left: 50%;
right: 0;
bottom: 0;
}
.ghover {
right: 100%;
}
.khover {
left: 100%;
}
.f {
    color: #4D5B5C;
    font: bold 20px/100px Arial Narrow, Arial, sans-serif;
    text-transform: uppercase;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin: -55px 0 0 -55px;
    text-align: center;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background: rgba(17, 17, 17, 0.4);
    border: 5px solid rgba(82, 82, 82, 0.2);
    -moz-box-shadow: inset 0 0 20px #000, 0 0 15px #646464;
    -webkit-box-shadow: inset 0 0 20px #000, 0 0 15px #646464;
    box-shadow: inset 0 0 20px #000, 0 0 15px #646464;
    cursor: pointer;
    -moz-transition: 2s linear;
    -o-transition: 2s linear;
    -webkit-transition: 2s linear;
    transition: 2s linear;
    }
.h {
    opacity: 0;
    visibility: hidden;
    top: -1000px
}

<div id='x' class='g'></div>
<div id='z' class='k'><p id='g' class='f'>Buka</p></div>

Terkait:

Javascript And CSS3 Opening