O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating animated notes

Now we are going to implement the code for the notes panel. This is where the animation of notes dropping from the top of the page happens. It works something like this:

  • The audio sequencer sends an event that a note should be played (see onAudioEvent() in the previous section).
  • The note is not actually played at that time. Instead a rectangular element that represents the note is added to the top of the notes panel.
  • Every time our animation interval timer fires, the y-position of the note element is incremented so that it moves down.
  • When the element hits the bottom edge of the notes panel (and the top edge of the keyboard), it plays the audio clip associated with the note.
  • When the element completely leaves the notes panel, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required