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
Comments