Hi,
I have two codes which both do what I want to achieve, however it works too slow. Therefor the first code, when moving your mouse too fast, it does not work and in the second code the 'movie' flickers. Can I perload or load faster or something? Or maybe a complete other method works better?
Code option 1:http://jsfiddle.net/DesignbyNine/the1sjLm/
<head><style type="text/css">.model { width: 400px; height: 300px; background-image: url('sprite.jpg'); background-position:0 0px; background-size:400px; position:absolute; left:223px;}</style><script src="jquery-1.11.1.js"></script><script type="text/javascript">jQuery(document).mousemove(function(event){ var x = jQuery(".model").offset(); var roundedoffsetX = Math.ceil(x.left/30.77) var relativeX = Math.ceil(event.pageX/30.77)-roundedoffsetX; var currentStep = relativeX*300; jQuery("div.model").mousemove(function(){ jQuery(".model").css("background-position", 0+" "+(currentStep)+"px") jQuery(".model span").text("X: " + event.pageX + ", Y: " + event.pageY) jQuery(".model p").text(currentStep) });});</script></head><body><div class="model" style="">Sunrise at 06:23<br/>Sundown at 20:54<br/><span></span><p></p></div>
then I thought, this might help, so it is not such a big image that should be loaded but it doesn't really improve
code option 2: http://jsfiddle.net/DesignbyNine/zc4xk2s2/
<head><style type="text/css">.model { width: 400px; height: 300px; background-image: url('Movies/Test12/dag-0000 copy.jpg'); background-position:0 0px; background-size:400px; position:absolute; left:223px;}</style><script src="jquery-1.11.1.js"></script><script type="text/javascript">jQuery(document).mousemove(function(event){ var x = jQuery(".model").offset(); var roundedoffsetX = Math.ceil(x.left/30.77) var relativeX = Math.ceil(event.pageX/30.77)-roundedoffsetX; var imageNumber = relativeX; jQuery("div.model").mousemove(function(){ jQuery(".model").css("background-image", "url('Movies/Test12/dag-000" + imageNumber + " copy.jpg')") jQuery(".model span").text("X: " + event.pageX + ", Y: " + event.pageY) jQuery(".model p").text(imageNumber) });});</script></head><body><div class="model" style="">Sunrise at 06:23<br/>Sundown at 20:54<br/><span></span><p></p></div></body>
What can I do to make the process smoother?