.switch
  .switcher
.wrapper
  %ul
    - (1..66).each do
      %li
        .text
        .finger
%input{:placeholder => "Type Something Creative ;)"}
View Compiled
body{
  margin: 0;
  padding: 0;
  background: #222;
}

body.light{
  background: #eee;
}

.switch{
  position: absolute;
  top: 35px;
  left: calc(50% + 335px);
  width: 40px;
  height: 15px;
  border-radius: 360px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.switch.on{
  background: rgba(152, 194, 37, 1);
  border: 1px solid rgba(132, 174, 17, 1);
}

.switch .switcher{
  width: 15px;
  height: 15px;
  border-radius: 360px;
  margin-top: -1px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  cursor: pointer;
}

.switch.on .switcher{
  margin-left: 24px;
}

.wrapper{
  position: absolute;
  top: 50px;
  left: calc(50% - 400px);
  width: 800px;
  height: 200px;
}

.wrapper ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.wrapper ul li{
  float: left;
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  border-radius: 3px;
  margin-left: 10px;
  margin-top: 10px;
  position: relative;
}

body.light .wrapper ul li{
  border: 1px solid #ccc;
}

body.light .wrapper ul li .text{
  color: #bbb;
}
body.light .wrapper ul li:nth-child(28) .text{
  background: #eee;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

body.light .wrapper ul li:nth-child(29) .text:before{
  background: #bbb;
}

.wrapper ul li:nth-child(14){
  width: 90px;
}

.wrapper ul li:nth-child(15){
  width: 70px;
}

.wrapper ul li:nth-child(28){
  width: 60px;
  border-bottom-right-radius: 0px;
}

.wrapper ul li:nth-child(28) .text{
  position: absolute;
  top: 27px;
  right: -1px;
  z-index: 5;
  background: #222;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  width: 40px;
  height: 40px;
}

.wrapper ul li:nth-child(29){
  width: 90px;
}

.wrapper ul li:nth-child(43){
  width: 65px;
}

.wrapper ul li:nth-child(55){
  width: 115px;
}

.wrapper ul li:nth-child(56){
  opacity: 0.5;
}

.wrapper ul li:nth-child(43) .text{
  margin-top: 22px !important;
  margin-left: -10px;
}

.wrapper ul li:nth-child(55) .text{
  margin-top: 22px !important;
  margin-left: 85px;
}

.wrapper ul li:nth-child(59){
  width: 55px;
}

.wrapper ul li:nth-child(60){
  width: 260px;
}

.wrapper ul li:nth-child(61){
  width: 55px;
}

.wrapper ul li:nth-child(63){
  height: 19px;
  margin-top: 30px;
}

.wrapper ul li:nth-child(64){
  height: 19px;
}

.wrapper ul li:nth-child(65){
  height: 19px;
  margin-top: 30px;
  margin-left: -42px;
  border-top: 0px solid #fff;
}

.wrapper ul li:nth-child(66){
  height: 19px;
  margin-top: 30px;
}

.wrapper ul li .text{
  color: #444;
  font-family: Helvetica;
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  width: 40px;
  height: 40px;
  margin-top: 5px;
  text-align: center;
}

.wrapper ul li:nth-child(14) .text{
  text-align: right;
  margin-left: 40px;
  font-weight: 100;
  margin-top: 20px !important;
  font-size: 23px;
}

.wrapper ul li:nth-child(15) .text{
  text-align: left;
  margin-left: 4px;
  font-weight: 0;
  margin-top: 20px !important;
  font-size: 23px;
}

.wrapper ul li:nth-child(29) .text.active:before{
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 5px;
  height: 5px;
  background: #98c225 !important;
  box-shadow: 0 0 3px #98c225;
  border-radius: 360px;
}

.wrapper ul li:nth-child(29) .text:before{
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 360px;
}

.wrapper ul li:nth-child(29) .text{
  margin-left: -10px;
  padding-top: 5px;
}

.wrapper ul li.activeKey .finger{
  position: absolute;
  width: 40px;
  height: 40px;
  top: -5px;
  left: -5px;
  margin-top: 5px;
  margin-left: 5px;
  border-radius: 360px;
  background: rgba(28, 171, 233, 0.5);
  opacity: 0;
}

input{
  border: 0px solid #fff;
  background: transparent;
  font-size: 20px;
  font-family: Helvetica;
  font-weight: 100;
  width: 780px;
  height: 40px;
  position: absolute;
  top: 330px;
  color: #ccc;
  left: calc(50% - 390px);
  border-bottom: 1px solid #333;
}

body ::-webkit-input-placeholder{
  color: #444;
}

body.light ::-webkit-input-placeholder{
  color: #bbb;
}

body.light input{
  border-bottom: 1px solid #ccc;
  color: #222;
}

body.light input:focus{
  outline: none;
  border-bottom: 1px solid rgba(28, 171, 233, 0.5);
}

body input:focus{
  outline: none;
  border-bottom: 1px solid rgba(28, 171, 233, 0.5);
}
var keyboardMap = {
  "type": "german",
  192: 0,
  49: 1,
  50: 2,
  51: 3,
  52: 4,
  53: 5,
  54: 6,
  55: 7,
  56: 8,
  57: 9,
  48: 10,
  189: 11,
  187: 12,
  8: 13,
  9: 14,
  81: 15,
  87: 16,
  69: 17,
  82: 18,
  84: 19,
  90: 20,
  85: 21,
  73: 22,
  79: 23,
  80: 24,
  219: 25,
  187: 26,
  13: 27,
  20: 28,
  65: 29,
  83: 30,
  68: 31,
  70: 32,
  71: 33,
  72: 34,
  74: 35,
  75: 36,
  76: 37,
  186: 38,
  222: 39,
  220: 40,
  16: 42,
  188: 43,
  89: 44,
  88: 45,
  67: 46,
  86: 47,
  66: 48,
  78: 49,
  77: 50,
  188: 51,
  190: 52,
  189: 53,
  16: 54,
  17: 56,
  18: 57,
  91: 58,
  32: 59,
  93: 60,
  18: 61,
  37: 62,
  38: 63,
  39: 65,
  40: 64,
  60: 43,
  44: 51,
  223: 11,
  45: 53,
  63: 11,
  43: 26
}

var keyboardKeys = {
  "type": "german",
  0: ["°","^"],
  1: ["!","1"],
  2: ["\"","2"],
  3: ["§","3"],
  4: ["$","4"],
  5: ["%","5"],
  6: ["&","6"],
  7: ["/","7"],
  8: ["(","8"],
  9: [")","9"],
  10: ["=","0"],
  11: ["?","ß"],
  12: ["`","´"],
  13: ["←"],
  14: ["⇥"],
  15: ["Q"],
  16: ["W"],
  17: ["E"],
  18: ["R"],
  19: ["T"],
  20: ["Z"],
  21: ["U"],
  22: ["I"],
  23: ["O"],
  24: ["P"],
  25: ["Ü"],
  26: ["*","+"],
  27: ["↩"],
  28: ["⇪"],
  29: ["A"],
  30: ["S"],
  31: ["D"],
  32: ["F"],
  33: ["G"],
  34: ["H"],
  35: ["J"],
  36: ["K"],
  37: ["L","@"],
  38: ["Ö"],
  39: ["Ä"],
  40: ["'","#"],
  42: ["⇧"],
  43: [">","<"],
  44: ["Y"],
  45: ["X"],
  46: ["C"],
  47: ["V"],
  48: ["B"],
  49: ["N"],
  50: ["M"],
  51: [";",","],
  52: [":","."],
  53: ["_","-"],
  54: ["&#x21e7;"],
  55: ["fn"],
  56: ["ctrl"],
  57: ["alt","⌥"],
  58: ["cmd","⌘"],
  60: ["⌘","cmd"],
  61: ["alt","⌥"],
  62: ["&#9664;"],
  63: ["&#9650;"],
  64: ["&#9660;"],
  65: ["&#9658;"]
}

$(document).ready(function(){
  $("body").addClass("light");
  $("input").focus();
  $(".wrapper ul li").each(function(i){
    if(keyboardKeys[i]){
      if(keyboardKeys[i].length > 1){
        var string = "";
        if(i==58 || i==60){
          for(var j=0;j<keyboardKeys[i].length;j++){
            string += keyboardKeys[i][j]+"&nbsp; &nbsp; &nbsp;";
          }
          $(".text", this).html(string).css("width","55px").css("margin-left","2px").css("margin-top","23px");
        }
        else{
          for(var j=0;j<keyboardKeys[i].length;j++){
            string += keyboardKeys[i][j]+"<br>";
          }
          $(".text", this).html(string); 
        }
      }
      else{
        $(".text", this).html(keyboardKeys[i][0]).css("margin-top","13px"); 
      }
      if(i==55 || i==56){
        $(".text", this).html(keyboardKeys[i][0]).css("margin-top","23px").css("margin-left","-8px"); 
      }
      if(i==57||i==61){
        $(".text", this).html($(".text", this).html()).css("margin-top","-2px").css("margin-left","-8px").css("line-height","22px"); 
      }
      if(i==61){
        $(".text", this).css("margin-left","9px");
      }
      if(i > 61){
        $(".text", this).css("margin-top","3px");
      }
    }
  });
  
  $(".switch").click(function(){
     $(this).toggleClass("on");
     $("body").toggleClass("light");
  });

  document.addEventListener("keypress",function(e){
    if(e.keyCode == 60 || e.keyCode == 44 || e.keyCode == 45 || e.keyCode == 223 || e.keyCode == 63 || e.keyCode == 43){
      keyDownAni(keyboardMap[e.keyCode],e);
    }
    if(!$("input").is(":focus")){
      e.preventDefault();
    }
  });
  
  document.addEventListener("keydown",function(e){
    if(e.keyCode == 8 || e.keyCode == 9){
      if(!$("input").is(":focus")){
        e.preventDefault();
      }
    }
    setTimeout(function(){
      if(e.shiftKey && e.keyCode == 16){
      var loc = e.location;
      if(loc == 1){
        //left
        keyDownAni(42,e);
      }
      else if(loc == 2){
        //right
        keyDownAni(54,e);
      }
    }
    else if(e.altKey && e.keyCode == 18){
      if(e.location == 1){
        //left
        keyDownAni(57,e);
      }
      else if(e.location == 2){
        //left
        keyDownAni(61,e);
      }
    }
    else if(e.keyCode == 187 || e.keyCode == 188 || e.keyCode == 189 || e.keycode == 191){
      
    }
    else{
      keyDownAni(keyboardMap[e.keyCode],e);
    }
    },10);
  });
});

function keyDownAni(eq,e){
  var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
  var uid = randLetter + Date.now();
  var sk = isCapslock(e);
  if(sk){
    $(".wrapper ul li").eq(eq).children(".text").toggleClass("active");
  }
  else{
    $(".wrapper ul li").eq(eq).children(".text").toggleClass("active");
  }
  $(".wrapper ul li").eq(eq).addClass("activeKey");
  $(".wrapper ul li").eq(eq).attr("id",uid);
  $("#"+uid+" .finger").animate({
    opacity: 1,
    width: "30px",
    height: "30px",
    top: "0px",
    left: "0px"
  },300, function(){ 
    $("#"+uid+" .finger").animate({
      opacity: 0,
      width: "40px",
      height: "40px",
      top: "-5px",
      left: "-5px"
    },300,function(){
      $("#"+uid+" .finger").eq(eq).removeClass("activeKey");
    });
  });
}

function isCapslock(e){
    e = (e) ? e : window.event;
    var charCode = false;
    if (e.which) {
        charCode = e.which;
    } else if (e.keyCode) {
        charCode = e.keyCode;
    }
    var shifton = false;
    if (e.shiftKey) {
        shifton = e.shiftKey;
    } else if (e.modifiers) {
        shifton = !!(e.modifiers & 4);
    }
    if (charCode >= 97 && charCode <= 122 && shifton) {
        return true;
    }
    if (charCode >= 65 && charCode <= 90 && !shifton) {
        return true;
    }
    return false;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js