살아 움직이는듯한 눈 - 왜 스크롤 할 때 따라 오는가?

Question

http://laboratory.stratusweb.co.uk/lea/ (아직 완료되지 않음)

눈이 커서를 따라갑니다.

내가 알아낼 수없는 것은 스크롤 할 때 눈이 페이지 아래로 이동하는 이유입니다.

모든 의견 환영합니다! 스크롤하는 동안

var windowX = -1; 
var windowY = -1; 
jQuery(document).ready(function() { 
    var canvas = document.getElementById("debugCanvas"); 
    canvas.width = document.width; 
    canvas.height = document.height; 
    jQuery(document).mousemove(function(e) { 
     var mousePosition = { 
      'x' : e.pageX, 
      'y' : e.pageY 
     }; 
     var context = document.getElementById("debugCanvas").getContext("2d"); 
     jQuery(".eyeContainer").each(function(i, i2) { 
      var eyeContainerPosition = $(this).offset(); 
      var eyePosition = { 
       'x' : eyeContainerPosition.left + $(this).width()/2 +1, 
       'y' : eyeContainerPosition.top - $('body').scrollTop() + $(this).height()/2 +1 
      } 
      var slope = getSlope(eyePosition, mousePosition); 
      var toCenterdistance = getDistance(eyePosition, mousePosition); 
      var targetDistance = toCenterdistance - ($(this).width()/2); 
      if(toCenterdistance > ($(this).width()/2)) { 
       var x = Math.cos(Math.atan(slope)) * targetDistance; 
       if(eyePosition.x > mousePosition.x) { 
        x += mousePosition.x; 
       } else if(eyePosition.x < mousePosition.x) { 
        x = -x + mousePosition.x; 
       } 
       var y = Math.sin(Math.atan(slope)) * targetDistance; 
       if(eyePosition.x > mousePosition.x) { 
        y += mousePosition.y; 
       } else if(eyePosition.x < mousePosition.x) { 
        y = -y + mousePosition.y; 
       } 
       x -= $(this).height()/2; 
       y -= $(this).height()/2; 
      } else { 
       x = mousePosition.x - ($(this).width()/2); 
       y = mousePosition.y - ($(this).width()/2); 
      } 
      var element=$("#eyeBall_" + $(this).attr("rel")); 
      element.css({ 
       'left' : x + 'px', 
       'top' : y + 'px', 
      }); 
     }); 
    }) 
}); 
function getSlope(loc1, loc2) { 
    return (loc1.y - loc2.y)/(loc1.x - loc2.x); 
} 
function getDistance(loc1, loc2) { 
    return Math.sqrt(Math.pow((loc1.x - loc2.x), 2) + Math.pow((loc1.y - loc2.y), 2)); 
} 

Answer 1

당신이 CSS 스타일의 호텔 position: fixed을 지정할 수 있습니다, 화면에 고정 된 위치에 대한 몇 가지 요소를 유지하려면 :

는 eyes.js 코드를 추가 잊으.

W3C documentation on position property.

업데이트 :

소스 코드를 볼 때 당신이 눈을 보유하고 참 position: fixed 세트가 사업부 <div class="big_face_holder">을 볼 수 있습니다.

Answer 2

이 줄 :

var eyeContainerPosition = $(this).offset(); 

이 페이지를 스크롤 한에 따라 다른 값을 반환 -이 문서의 상단이 아닌 창 상단에 상대 오프셋 반환합니다.

는 보상하기 위해

'y' : eyeContainerPosition.top - $('body').scrollTop() + $(this).height()/2 +1 

와 라인

'y' : eyeContainerPosition.top + $(this).height()/2 +1 

를 교체하십시오.