mobile animation demo

by gravitybox

HTML

<!--<input type='text' style='border:1px solid #777;'></input>-->
<div id='canvas'><div id='frame'></div><input id='floating' type='text'></input>
<img id='keypad' src='http://core0.staticworld.net/images/article/2013/09/twitter-keyboard-100056244-large.png'></div>

CSS

#canvas{
    width:400px;
    height:800px;
}

#keypad {
    position:absolute;
    bottom:0px;
    width:400px;
    display:none;
}

#frame {
 
    border:2px solid #008ae8;
     border-top:4px solid #008ae8;  
    border-radius:5px;
    width:120px;
    height:50px;
    position:absolute;
    top:20px;
    left:20px;
    z-position:20;
    display:none;

}


#floating {
    border:2px solid #999;
    width:100px;
    height:40px;
    position:absolute;
    top:20px;
    left:20px;
    display:none;
}
input{
        width:100px;
    height:40px;
    border:none;
    padding-left:10px;
    
    border-radius:5px;
    font-size:18px;
    color:#888;
    outline:none;

}

JavaScript

        $(document).ready(function(){

        $('#canvas').dblclick(function( event ){
            var leftpos = event.pageX -50;
            var toppos = event.pageY -20;
            
            $('#floating').clone().prependTo( "#canvas" ).css({top: toppos, left: leftpos});
            $('#frame').css({top: toppos-6, left: leftpos-5});
            
            $('#floating').show('scale', { duration: 500, easing: 'easeOutBack' }, function (){ 
               $(this).focus();
                $('#keypad').show('slide',{ duration: 500, direction: 'down', easing: 'easeOutExpo' } );
                });
                $('#frame').show('fade', { duration: 500, easing: 'easeInQuart' });
            
        });


            
            
    });