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 />
<title>JS Bin</title>
</head>
<body>
  <ul class="container">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>
​
 
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sing: border-box;
}
​
body {
  margin: 0;
}
​
.container {
  margin: 0;
  padding: 0;
  list-style: none;
}
​
li {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
  border: 2px solid #BF5600;
  background-color: #BF5600;
}
​
li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 1;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
    
}
​
li.inviewport:after {
  opacity: 0;
}
​
li:nth-child(2n) {
  border-color: #7CBF00;
  background-color: #7CBF00;
}
​
li:nth-child(3n) {
  border-color: #00BF2F;
  background-color: #00BF2F;
}
​
li:nth-child(4n) {
  border-color: #00A2BF;
  background-color: #00A2BF;
}
​
li:nth-child(5n) {
  border-color: #0900BF;
  background-color: #0900BF;
}
​
li:nth-child(6n) {
  border-color: #B500BF;
  background-color: #B500BF;
}
 
(function(window) {
​
var watch = ".container",
    viewportHeight,
    top, bottom, timeout;
​
document.addEventListener("DOMContentLoaded", checkViewport);
​
// debounced wheel event
window.addEventListener( "scroll", function() {
  if ( timeout ) {
    clearTimeout( timeout );
  }
  timeout = setTimeout( checkViewport, 150 );
});
  
document.body.addEventListener("dblclick", function( e ) {
  if ( e.target.nodeName == "LI" ) {
    e.target.parentNode.removeChild( e.target );
  }
});
​
function checkViewport() {
  timeout = null;
​
  // on first call
  if ( !top ) {
    viewportHeight = window.innerHeight;
    // use first child of the watched container as a starting point
    top = bottom = document.querySelector( watch ).firstElementChild;
  
  }
​
  // determine in which direction the elements will be searched
  if ( top.getBoundingClientRect().top <= 0 ) {
    
    while ( top && !isInviewport( top ) ) {
      top.classList.remove("inviewport");
      top = top.nextElementSibling;
    }
           
    bottom = top;
  
    while ( bottom && isInviewport( bottom ) ) {
      bottom.classList.add("inviewport");
      bottom = bottom.nextElementSibling;
    }
    
  } else {
    
    while ( bottom && !isInviewport( bottom ) ) {
      bottom.classList.remove("inviewport");
      bottom = bottom.previousElementSibling;
    }
           
    top = bottom;
  
    while ( top && isInviewport( top ) ) {
      top.classList.add("inviewport");
      top = top.previousElementSibling;
    }
    
  }
  
  
}
​
function isInviewport( node ) {
  var bcr = node.getBoundingClientRect();
​
  return bcr.bottom >= 0 && bcr.top < viewportHeight;
}
  
})(window);
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers