SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mousemove Question

    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. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  3. #3
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Very cool
    my 5 cents.
    It can be a start
    Code JavaScript:
    <!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.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, guys! Thanks for the start.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •