Jump to content

Nine

Members
 View Profile  See their activity

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Everything posted by Nine

  1. Nine
    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?
  2. Nine
    What I am trying to achieve is that the blinds are turning based on the mouse pointer. it should look like they are following the mouse. I rendered 13 images in which the blinds have a different angle very time so it looks that they are turning around when shown in the right order. Based on the mouse position one of the 13 images is shown. I only want that the image is changing when the mouse is in the area of the image, now the width of the whole screen is used and I want only to use the part where the image is located. Does that explains a bit more? I will look into the code above, see if I can use it for what I want to achieve.
  3. Nine
    My first jQuery attempt :-), I have a working function now, however it should only work when the mouse hovers over the image. I tried something with the hover function, but that does not work properly. Something strange is happening (I displayed the mouse coordinates to see what is happening). http://jsfiddle.net/the1sjLm/5/ <head><script src="jquery-1.11.1.js"></script><script type="text/javascript">$(document).mousemove(function(event) { var relativeX = Math.ceil(event.pageX/123); var currentStep = relativeX*-230; $(".model").hover(function(){ $(".model").css("background-position", 0+" "+(currentStep)+"px"); //just to check what is happeninga $("span").text("X: " + event.pageX + ", Y: " + event.pageY) });});</script><style type="text/css">.model { width: 300px; height: 230px; background-image: url('sprite.png'); background-position:0 3000px;}</style></head><body><div class="model" style=""></div><p>Data <span></span></p></body>
  4. Nine
    Thanks so far, that helps me to search further in the right direction!
  5. Nine
    Hi everyone, I'd like to incorporate this in my own wordpress website: http://www.atticweb.nl/wp-admin. The image of the building changes due to the location of your mouse pointer. With the developer tool in Chrome I figured out that the background position is changing in the CSS. But I can't figure out how this is written into the CSS and which input is used. Can someone help me with this? (The owner of the site doesn't know either). Thanks a lot, Nine
×
×
  • Create New...