large image scroll effect

large image scroll effect

Hey all,

I'm a graphic designer with some experience in Actionscript/HTML/CSS. I'm now trying my hand on jQuery.

My goal is to achieve an effect to scroll a large image, something like this Flash example:

(click on 'Zoom In')

Below my result so far. It kind of works but nowhere near as smooth as i want it to be. Frankly my programming skills are insufficient to take it to a next level.

Anyone ideas, tips or seen this effect elsewhere? 

  2. <html lang="en">
  3. <head>

  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>slide scroll</title>

  8. <script src="jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
  10. <script type="text/javascript">
  11. $(function(){
  12. $(document).mousemove(function(e) {
  14. var xPercentage = (e.pageX)/$(window).width();
  15. var yPercentage = (e.pageY)/$(window).height();
  17. var xPos = Math.round(($(window).width()-$('#photo').width())*xPercentage);
  18. var yPos = Math.round(($(window).height()-$('#photo').height())*yPercentage);
  20. $('#photo').stop().animate({'top':yPos, 'left':xPos})
  22. });
  23. });
  24. </script>
  26. <style>
  27. html{
  28. overflow:hidden;
  29. }

  31. #photo{
  32. position:relative;
  33. width:1000px;
  34. height:1300px;
  35. background:#999;
  36. border:5px dotted black;
  37. }
  38. </style>

  40. </head>
  41. <body>
  42. <div id="photo"></div>
  43. </body>
  44. </html>