Mousemove Question

JavaScript
1

Does anyone know how I can achieve this in javascript or jquery for that matter?http://www.donedhardy.fr/lookbook2.php I would like to have the screen move around with some easing the way it is on this site.

Thanks,

Din

2

Awesome, guys! Thanks for the start.

3

The page is kinda cool… It looks like it is calculating the position of the image gallery container based on the mouse position (clientX and clientX) compared to the origin (0,0).

The body has to have overflow:hidden.

The difference between the mouse’s current position and the origin indicates how much the mouse has moved by. to calculate the new position of the gallery, you would have an equation like:
x-coordinate = -(clientX * (gallery.width / body.width))
y-coordinate = -(clientY * (gallery.height / body.height))

now you just need to have an onmousemove event listener and do your animation to the new x,y coordinates. You can write your own animation script or use the animate function of jquery (check out http://api.jquery.com and search for animate).

4

Thanks for the idea. I have a question, I have a container size of 2600 x 1560, but mouse move doesn’t show the bottom portion when move the mouse towards the botttom. Any suggestions?

5

Hi,
Very cool :slight_smile:
my 5 cents.
It can be a start


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>User - Register</title>
<meta name="content-language" content="en" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body{
 margin-top:20px;
}
#container{ background:red;
  margin:0 auto;
  width:736px;
  height:736px;
  position:relative;
  overflow:hidden;
}
#shopWindow{
  position:absolute;
  top:0;
  left:0;
}
a img{
  border:none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function windowShopBuilder(){
  var imgs = '';
  var i=0;
  while (i<=10){
    imgs += '<p style="width:1104px">';
    $.each([1,2,3,4,5,6], function(index, value) { 
    imgs += loadImg(value+'.jpg');
    });
    imgs += '</p>';
    i++;
  }
  $('#shopWindow').html(imgs);
  function loadImg(imgPath){
    var slides = '<a href="#"><img src="'+imgPath+'" title="" /></a>';
    return slides;
  }
}
function debug(x,y){
  $('#debug').html(x +', '+ y);
}
function shopWindowNavigator(){
    $('#container').mousemove(function(e){
      var $shopWindow = $('#shopWindow');
      var containerWidth = $('#container').width();
      var containerHeight = $('#container').height();
      var shopWindowWidth = $shopWindow.width();
      var shopWindowHeight = $shopWindow.height();
      var middleW = containerWidth/2;
      var middleH = containerHeight/2;
      var x_coordinate = (e.pageX - this.offsetLeft); 
      var y_coordinate = (e.pageY - this.offsetTop);
      if(x_coordinate > middleW){
        x_coordinate = middleW;
      } 
      if(x_coordinate > middleH){
        y_coordinate = middleH;
      } 
      $shopWindow.css('top',-y_coordinate);
      $shopWindow.css('left', -x_coordinate);
      /* $shopWindow.animate({
      top: x_coordinate,
      left:y_coordinate
      }, 100);*/
      debug(x_coordinate,y_coordinate);
  }); 
}
function shopWindowSlidesFade(){
  $('#shopWindow a img').click(
  function(){alert('Do somethink');}
  
  );
}
$(document).ready(function() {
  windowShopBuilder();
  shopWindowNavigator();
  shopWindowSlidesFade();
});
</script>

</head>
<body>
<div id="container">
<div id="shopWindow"></div>
</div>
<div id="debug"></div>
</body>
</html>

images size 184x184

Bye.

Ps
windowShopBuilder is just a quick way to fill the shop window.