Programming object oriented interfaces and animations in JavaScript 

  1.0   1.0
  1.0   1.0

Move the pointer of the mouse over the video. Click in the video or press the space bar to start playing it. Click or press the space bar to pause it, to continue to play it. Use the right and left arrows to move forward or backward by one second, press the Shift key or the Ctrl key at the same time to move forward or backward by ten seconds or a hundred milliseconds. Press the 0 key to come back to the beginning. Press the plus key to play the video faster, the minus key to play it slower, the asterisk key to come back to the normal speed. NOTE: These commands are available for all the types of clips.

Activate the sound.

IMPORTANT: The layout and the style of an interface are in the hands of the programmer. No graphical design is imposed. The examples use the icons from Font Awesome.

Modify the width or the height of the video in pixels. NOTE: The editor preserves the aspect ratio of the display and adjusts the other dimension automatically. Invert the display horizontally or vertically. Try a grayscale or a sepia effect. Blur the display. Modify the contrast, the brightness, the saturation, the tint of the video.

Try the Undo and Redo buttons.

Reload the page. The modifications are saved.


Type in a couple of words, e.g. Paris • London • . Press Enter to validate the text. NOTE: The text is always displayed in capital letters. Modify the size of the font. Check the box to show the text in bold. Change the font of the text by entering the name of a font from Google Fonts, e.g. Slackey or Righteous. Choose the color of the text, e.g. #CB6. Adjust the dimensions of the clip. Change the numbers of seconds of the duration of the animation and the start delay. Try different animation effects, e.g. linear ou ease-in-out. NOTE: The animation runs two times alternating the direction of the rotation. The total duration of the clip is equal to 2 times the duration of the animation + the start delay.

Click on the emblem to start the animation. Click again to pause it, to continue to play it.

  • Build sophisticated interactive applications.
  • Rely on a simple and solid MVC architecture.
  • Work with your usual development tools.
  • Use your own graphical designs.