0

I'm working on a VFX portfolio site.

I've used event listeners to (almost) synchronize three videos.

The plan is to put the three video-divs on top of each other, and then have video1 be visible to the left of the mouse position, video2 to be visible to the right og the mouse position, and have video3 be visible 50px to the left, and 50 pixels to the right of the mouse position, sort of like a band of video.

How do I go about this?

Jon Mikkel Hansen
  • 1

1 Answers1

0

Using jQuery you can get the mouse position like this:

$('div').bind('mousemove',function(e){
    videoX = e.pageX;
});

That is from the top left of the window. So you need to adjust it to take into account the position of the video div. Get that like this:

var videoOffset = $('video').offset().left;

And you may as well get the width as well for later.

var videoWidth = $('video').width();

Now you can figure out the position of the mouse relative to the top left of the video:

$('div').bind('mousemove',function(e){
    videoX = e.pageX - videoOffset;
});

With that information you should be able to do what you want with the videos.

Hope that gets you on the right track :)

will
  • 4,557
  • 6
  • 32
  • 33