How to make HTML scroll according to mouse movement?

Question

I have images much larger than the actual screen size. I want a webpage that displays one of these images in its original size, hence only showing a portion of the actual image. The visible area of the image shall scroll according to mouse movement.

The webpage at http://www.joeltinley.com/ shows what I want to accomplish. However, this guy is using Flash, while I would like to have a solution based on HTML, CSS and Javascript.

Is there a common solution for this? Maybe some jQuery magic? Any other hints?

I've been searching the web, but I didn't find a satisfying solution so far.

dmi3y · Accepted Answer

I was always interested in doing something like this, so just for fun here is prototype, it might be not such a perfect but it gives the whole idea, and you may fight with hassles later on.

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="imgHolder">
  </div>
</body>
</html>

CSS

.imgHolder {
background: url(http://mickricereto.files.wordpress.com/2012/09/3_siematic-s3-graphite-grey_lotus-white.jpg) no-repeat 50% 50%;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}

and piece of jQuery, though you may do it at any library or even core JS

(function(){
  var 
      div = $('.imgHolder'),
      divX = div.width(),
      divY = div.height(),
      backgroundX, backgroundY, backgroundPos;


  // hint
  //  mouse on the right background position for x img = 100%
  //  mouse on the left background position for x img = 0
  //  center background position for x img = 50%

  //  mouse on the top background position for y img = 0
  //  mouse on the bottom background position for y img = 100%
  //  center background position for y img = 50%

  // now if
  //  divX       = 100%
  //  ev.clientX = x%
  //  divY       = 100%
  //  ev.clientY = y%
  // is what we need

  $(div).mousemove(function(ev){

    backgroundX = 1/divX*ev.clientX*100;
    backgroundY = 1/divY*ev.clientY*100;
    backgroundPos = backgroundX + '%' + ' ' + backgroundY + '%';
    div.css('background-position', backgroundPos);

  });
})();

working example on jsbin

Teja Kantamneni · Answer

There are some jQuery plugins which can help achieve similar effects. But you will need to tweak them to fit your needs..

http://johnpolacek.github.com/scrolldeck.js/

http://stephband.info/jparallax/index.html

How to make HTML <IMG> scroll according to mouse movement?

Tags:

javascript

html

jquery

css

Philip

2 Answers

dmi3y

Teja Kantamneni

Recent Activity

Donate For Us