Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
​
</head>
<body>
  
  <div id="holder">
    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolore impedit dignissimos porro repellendus numquam aut quibusdam, consequuntur modi facere? Totam ut libero corporis sit sequi explicabo ab magni quaerat unde animi aliquid facere necessitatibus, quae molestias ad dolores qui blanditiis, quisquam minima beatae autem iure. Neque animi tempore iste accusamus ut cum ipsam possimus, perspiciatis quia illo obcaecati sed molestiae amet architecto, nostrum cumque quaerat minima minus, consequatur rem error nihil. Ipsa eveniet, praesentium suscipit optio blanditiis at, vel illum harum omnis quam. Quas eaque soluta quia ipsa? Illum inventore veritatis facilis eveniet voluptatibus atque laborum necessitatibus adipisci aliquam?</p>
      <img src="http://static.jsbin.com/images/dave.min.svg" alt="PasteBin" width="200">
    </div>
  </div>
​
</body>
</html>
 
#holder {
  background: gray;
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 400px;
  
  #content {
    width: 150%;
    height: 600px;
    background: lightgray;
  }
}
 
$(function(){
  
  var $mmGal = $('#holder'),
      $mmImg = $('#content'),
      damp = 10, // higher number = smoother response
      X = 0, Y = 0,
      mX = 0, mY = 0,
      wDiff, hDiff,
      zeno;
 
  function motion(){
    zeno = setInterval(function(){ // Zeno's paradox "catching delay"
      X += (mX-X) / damp; 
      Y += (mY-Y) / damp;        
      $mmGal.scrollLeft(X*wDiff).scrollTop(Y*hDiff);
    }, 26);
  }
  
  // Get image size after it's loaded and run our fn  
  $mmImg.one('load', function() {   
    wDiff = ( this.width/$mmGal.width() )-1,          
    hDiff = (this.height/$mmGal.height())-1; 
  }).each(function() {
    if(this.complete) $(this).load();
  });
  
   
  $mmGal.mousemove(function(e) {
    mX = e.pageX-this.offsetLeft;
    mY = e.pageY-this.offsetTop;  
  }).hover(function( e ){
    return e.type=='mouseenter'? motion() : setTimeout(function(){
      clearInterval(zeno);
    },1200); // clear if not used
  });
​
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers