Part of the key to making website experiences seem polished and exciting is adding animated interactive elements. People like to see things that move, that they can click on or drag around. Developers have yet to adopt a consistent amount of this functionality. Part of the reason is Flash has library to aid in the process of making these elements. HTML5 and Javascript simply lack either the library or the graphical user interface to allow developers to easily manipulate and place elements. Old school calculations and physics are still in play here.
DEMO
DOWNLOAD
Below is an HTML5 video manipulation that takes a video and allows the user to pull parts of the video away from it. Probably isn’t browser compatible, but you get the idea…
I’ll start with the basics. What we are doing here is pulling the information from a an HTML5 video and re-writing that information to a canvas tag. In order to get the video to appear in a circle that you click, we need to take the video information in a circle pattern from where you clicked, write it to a canvas element, then make that canvas element follow your mouse around until you release it.
There’s some CSS3 Transitions on things, but for the most part the work is done with javascript. I run through it below:
Basically we set up our “App” with a whole bunch of variables. When the window is finished loading we call App.init() which embeds the video, which is set to autoplay in the HTML Tag, look it up for reference. Then we set up some variables and grab some elements from the page. Then around line 62 we set some even listeners for when we click on the video, when our mouse moves, etc. Finally we call a recursive function called “callback()” when the video is playing. This function does two things, calls another function called “compute frame” which does all the work, then calls itself again to step to the next frame. Repeat.
“computeFrame()” checks to see if we’ve clicked and if we’re moving the mouse. If we are, it draws the video data from canvas1 to canvas3 (canvas 3 is the circular one that follows our mouse). Canvas 1 simply stores the image data, canvas 3 has a border radius like a circle and follows our mouse if we’ve pressed mouse down and not triggered the “mouseup” event.
As always, let me know if you need help!
This is sweet!