Home/ Questions/Q 7974123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T08:17:05+00:00

the first two keys are operational (leftmost key, and the black key right next

  • 0

the first two keys are operational (leftmost key, and the black key right next to it). here it is hosted so you can see

http://23.23.184.26/miller/keyboardanimation/main.html

I have to redraw the WHOLE keyboard because the 3d nature of each key does not leave a square profile that I can replace with a square image. I don’t see support anywhere for trapezoidal elements…

Should I be doing this in SVG or canvas or something? I feel like the way I’m doing this is really dumb.

And, I’m getting a wierd white flash between transitions sometimes (on IE9 only tho I think)

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        a{
            color:white;
        }
        #main{
            background:white url('0.gif') no-repeat 0 0;
            position:relative;
            z-index:0;
            width:506px;
            height:319px;
        }

        #key1{
            position:absolute;
            width:50px;
            height:75px;
            top:175px;
            left:55px; 
        }
        #key2{
            position:absolute;
            width:50px;
            height:75px;
            top:100px;
            left:85px;
        }
        /*uncomment this to show button zones*/
        /*#key1:hover, #key2:hover{
            border:1px solid red;
        }*/
    </style>
</head>

<body>
    <div id="main">
        <div id="key1" onMouseDown="document.getElementById('main').style.background = 'url(1.gif)'" onMouseUp="document.getElementById('main').style.background = 'url(0.gif)'"></div>
        <div id="key2" onMouseDown="document.getElementById('main').style.background = 'url(2.gif)'" onMouseUp="document.getElementById('main').style.background = 'url(0.gif)'"></div>
    </div>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are not using CSS animation :-/, you are making simple background transition using Javascript.

    That said there is also another small detail, if you use canvas to draw and animate the piano, you will need to “re-draw” the piano that doesn’t change and every part of the piano that changes.

    I would suggest that you do this in SVG and animate that, as you will have less parts to animate :-).

    Greetings!
    Gonzalo G.

    • 0