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>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#masked {
    background: none repeat scroll 0 0 #FFFF00;
    display: block;
    position: absolute;
    width: 720px;
    background: url('http://4.bp.blogspot.com/_q2DyIrP9k3M/SsJmeg1BywI/AAAAAAAABWw/hQeFR9sM4Go/s200/334_tile_Sunrise.jpg');
  z-index: 998;
}  
  
#mask-behind{
width:720px;
height:2000px;
background: url('http://i203.photobucket.com/albums/aa217/bitwierd/Chequerboard.png');
display:block;
float:left;
position:relative; 
z-index:997;
}
</style>
</head>
<body>
    <div id="mask-behind"> 
      <div id="masked"></div>
    </div>
</body>
</html>
 
    var maskbehind = document.getElementById('mask-behind');
    var masked = document.getElementById('masked');
    
    var TOStoMouse = 0;
    
​
    
    $(document).mousemove(function(e){
    currentY = (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
    TOStoMouse = e.pageY - currentY;
    DIVtoMouse = e.pageY-maskbehind.offsetTop;
    masked.style.height = (DIVtoMouse)+"px";    
    });
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers