Software & Technologies
The HTML5 web standard includes a number of components that combine to create visual effects directly in a browser. In terms of video effects, I am excited that I can combine video with CSS to create layout effects, transformations, transitions, and animations. I can also render video to the HTML5 canvas to create advanced pixel-level color effects and tile effects.
Part 2 builds on concepts from my October 2013 article, which shows you how to add a range of simple layout effects to your video projects. Part 2 covers more advanced video effects, working with CSS transitions, and rendering video to the HTML5 canvas by guiding you through a range of examples.
Part 2 is divided into the following sections:
- Using the exercise files (video)
- The basic code setup
- Rotating the video with a transformation
- Fading the video with a transition
- Animating multiple transformations simultaneously
- Drawing the video to a canvas
- Drawing the video to multiple tiles
- Making the video tiles draggable on the canvas
**This article has been retired along with other Adobe Inspire Magazine content. (December 2015)
Companion videos for the article are still available at the following links:
HTML5 Video Effects – Part 2: Using the Exercise Files (4 min)