Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="bg" ></div>
  <div class="menu">
  <div class="main" >Item 1</div>
  <div class="main" >Item 2</div>
  <div class="main" >Item 3</div>
  <div class="main" >Item 4</div>
  <div class="main" >Item 5</div>
  <div class="main" >Item 6</div>
  <div class="main" >Item 7</div>
  <div class="main" >Item 8</div>
  <div class="main" >Item 9</div>
  <div class="main" >Item 10</div>
  <div class="main" >Item 11</div>
  <div class="main" >Item 12</div>
  <div class="main" >Item 13</div>
  <div class="main" >Item 14</div>
  <div class="main" >Item 15</div>
  <div class="main" >Item 16</div>
  </div>
  <div id="desk"></div>
    <div id="start"></div>
</body>
</html>
 
.menu{
  position:fixed;
  left:10px;
  top:10px;
  display:inline-block;
  width:100%;
  height:100%;
}
#desk{
  position:fixed;
  left:0px;
  top:0px;
  background-image:url("http://www.hdwallpapers.in/walls/windows_8_official-wide.jpg");
  width:100%;
  height:100%;
background-size: contain;
​
}
​
.main{
  width:24%;
  height:24%;
  background-color:orange;
  transition:all 0.5s;
  display:inline-block;
  margin:2px;
}
​
#bg{
  position:fixed;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background-image:url("http://www.softwarecrew.com/wp-content/uploads/2011/08/windows_8_wallpaper_large.png");
}
​
#start{
  position:fixed;
  bottom:5px;
  left:5px; 
  height:50px;
  width:50px;
  background-image:url("http://img.mywindows8.org/images3/Windows-8-start-button.jpg");
background-size: contain;
}
 
$(document).ready(function(){
$(".main").mousedown(function(){
$(this).css("-webkit-transform","scale(0.93,0.93)");
});
​
$(".main").mouseup(function(){
$(this).css("-webkit-transform","scale(1,1)");
});
var vis=false;
$("#start").click(function(){
 if(vis === false)
   {    
          $("#desk").fadeOut(200);
     $("#bg").fadeIn(500);
     $(".menu").show("scale",{direction:"both",origin:["middle","center"],percent:100,easing:"easeOutQuint"},500);
​
     vis=true;
}
 else{
        $("#bg").fadeOut(500);
   $(".menu").hide("scale",{direction:"both",origin:["middle","center"],percent:50},300);
   vis=false;
     $("#desk").fadeIn(200);  
 }
    });           
                });
​
$(document).keydown(function(e){
  if(e.which==17 || e.which==91 ){
    $("#start").trigger("click");
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JArpitpro
0viewers