please note this is designed for touch screen devices only at the moment although it should work with your mousewheel.
I've successfully gotten a nice video scrubbing action going here:
(please note you have to swipe the screen or roll the mouse wheel to activate)
this relies on scroll position to scrub the video timeline. At the time update we see the animation event occur. (divs animate and are displayed)
however I cannot figure out how to reverse the effect. I would like the divs to toggle their animation state when the video timeline is played back to a previous currentTime - for example currentTime <= (some number)
here is the code I've used for the scroll position:
var vid = document.getElementById('v0');
var windowwidth = $(window).width()-20;
var scrollpos = window.pageXOffset/200;
var targetscrollpos = scrollpos;
var accel = 0;
// ---- Values you can tweak: ----
var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
// pause video on load
vid.pause();
window.onscroll = function(){
//Set the video position that we want to end up at:
targetscrollpos = window.pageXOffset/200;
};
setInterval(function(){
//Accelerate towards the target:
scrollpos += (targetscrollpos - scrollpos)*accelamount;
//update video playback
vid.currentTime = scrollpos;
vid.pause();
}, 60);
and the script used for the event handler:
function myHandler() {
$(".boxB").animate({ marginLeft:'0px'},400);
$(".boxA").animate({ width:'620px'}, 400);
}
var runAtTime = function(handler, time) {
var wrapped = function() {
if(this.currentTime >= time) {
$(this).off('timeupdate', wrapped);
return handler.apply(this, arguments);
}
}
return wrapped;
};
$('#v0').on('timeupdate', runAtTime(myHandler, 3.5));
Perhaps there is a way to combine the 2 separate scripts?
I'm a a loss if I should even be pursuing this idea with this particular approach.
any suggestions on where to look would be appreciated