Simple Typing tutor
HTML
<div id='res'></div>
<div id='dynm' ></div>
CSS
.keyeater{
width:50px; height:50px;
position:absolute;
text-align:center; font-size:30px;
border-radius:50%;
box-shadow: inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
line-height:65px;color:#EDF5F5;
animation: bub 2000ms infinite alternate;
}
@keyframes bub {
0% { height:65px;width:65px; }
100% { height:50px; }
}
body{
overflow:hidden;
}
#dynm{
position:absolute;
font-family: 'Cooper Std Black';
top:0px;
left:0px;
width:100%;
height:100%;
background: #09f;
}
#res{position:absolute;
top:0;left:0;z-index:100; }
JavaScript
$(document).keypress(function(e){
str = String.fromCharCode(e.which);
//alert(str.charCodeAt(0) +" : "+str+'<br>');
$('a').each(function(elm,i){
if(e.which==$(this).attr('key')){
$(this).css({'transition-property':'transform','transition':'700ms ease-in-out'});
$(this).css('transform','scale(2) translateY(-50px)');
var that = this;
setTimeout(function(){
$(that).remove();
},700);
}
});
});
setInterval(function(){
keyarr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmonpqrstuvwxyz1234567890-=[]{} ;':\"\\|/?><.,!@#$%^&*()_+`~";
keyarr = keyarr.split("");
key = Math.round(Math.random()*keyarr.length);
key = keyarr[key];
var lft = Math.round(Math.random()*$('#dynm').width());
var scale =(Math.random()*1.5);
scale = parseFloat(scale).toFixed(2);
var speed = Math.floor(Math.random() * (10000 - 5000 + 1)) + 5000;
// $('#res').text(speed);
if(scale<0.80){ scale = 0.9 }
if(lft > $('#dynm').width()-50){ lft=lft-50 }
if(key){
var keyeater = $('<a/>',{'class':'keyeater','key':key.charCodeAt(0)});
keyeater.text(key).css({'left':lft,'top':$(window).height()+60,'transform':'scale('+scale+')'}).animate({top:-50},speed);
$('#dynm').append(keyeater);
}
try{
$('a').each(function(elm,i){
if($(this).position().top<-45){
$(this).remove();
}
});
}
catch(e){
}
},1000);