<div class="container">
  <h1 class="reveal">Scroll to reveal</h1>

  <section class="small">
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
  </section>
  <h1 class="reveal">Click to reset</h1>
  <section class="medium">
    <div class="box reveal"></div>
    <div class="box reveal"></div>
  </section>
  <section class="small">
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
  </section>
  
  <section class="big">
    <div class="box reveal"></div>
  </section>
  
  <h1 class="reveal">Clicketi clicketi</h1>
  
  <section class="medium">
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
  </section>
  
  <section class="big">
    <div class="box reveal"></div>
  </section>
  
  <section class="small">
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
  </section>
  
  <section class="medium">
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
  </section>
  
  <section class="small">
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
    <div class="box reveal"></div>
  </section>
</div>

@import url(https://fonts.googleapis.com/css?family=Roboto);

@navy: #001f3f;
@blue: #0074d9;
@aqua: #7fdbff;
@teal: #39cccc;
@olive: #3d9970;
@green: #2ecc40;
@lime: #01ff70;
@yellow: #ffdc00;
@orange: #ff851b;
@red: #ff4136;
@maroon: #85144b;
@fuchsia: #f012be;
@purple: #b10dc9;
@black: #111111;
@gray: #aaaaaa;
@silver: #dddddd;



body {
  background: @black;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: opacity 0.8s, transform 0.8s;
  
  &_visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


.box {
  background: @green;
  margin: 2%;
  border-radius: 10px;
  display: inline-block;
  
  .small & {
    width: 20%;
    padding-bottom: 20%;
    
    &:nth-of-type(1) { background: @olive; }
    &:nth-of-type(2) { background: @blue; }
    &:nth-of-type(3) { background: @aqua; }
    &:nth-of-type(4) { background: @teal; }
  }
  
  .medium & {
    width: 44%; padding-bottom: 25%;
    
    &:nth-of-type(2) { background: @navy; }
    &:nth-of-type(3) { background: @yellow; }
    &:nth-of-type(4) { background: @red; }
  }
  
  .big  & {
    background-color: @lime;
    width: 94%; padding-bottom: 30%;
  }
}

var rafId = null;
var delay = 200;
var lTime = 0;

function scroll() {
  var scrollTop = $(window).scrollTop();
  var height = $(window).height()
  var visibleTop = scrollTop + height;
  $('.reveal').each(function() {
    var $t = $(this);
    if ($t.hasClass('reveal_visible')) { return; }
    var top = $t.offset().top;
    if (top <= visibleTop) {
      if (top + $t.height() < scrollTop) {
        $t.removeClass('reveal_pending').addClass('reveal_visible');
      } else {
        $t.addClass('reveal_pending');
        if (!rafId) requestAnimationFrame(reveal);  
      }
    }
  });
}
function reveal() {
  rafId = null;
  var now = performance.now();
  
  if (now - lTime > delay) {
    lTime = now;
    var $ts = $('.reveal_pending');
    $($ts.get(0)).removeClass('reveal_pending').addClass('reveal_visible');  
  }
  
  
  if ($('.reveal_pending').length >= 1) rafId = requestAnimationFrame(reveal);
}

$(scroll);
$(window).scroll(scroll);
$(window).click(function() {
  $('.reveal').removeClass('reveal_visible').removeClass('reveal_pending');
  lTime = performance.now() + 500;
  var top = $(window).scrollTop();
  $(window).scrollTop(top === 0 ? 1 : top-1);
});