Show blocks on scroll

by vovkasolovev

HTML

<div class="container flexy">
  <div class="panel-block slide-up-start">
    <div class="block">¶</div>
  </div>
  <div class="panel-block slide-up-start">
    <div class="block">¶</div>
  </div>
  <div class="panel-block slide-up-start">
    <div class="block">¶</div>
  </div>
  <div class="panel-block slide-up-start">
    <div class="block">¶</div>
  </div>
  <div class="panel-block slide-up-start">
    <div class="block">¶</div>
  </div>
  <div class="panel-block slide-up-start">
    <div class="block">¶</div>
  </div>
  <div class="panel-block slide-up-start">
    <div class="block">¶</div>
  </div>
  <div class="panel-block slide-up-start">
    <div class="block">¶</div>
  </div>
</div>

<div class="container">
  <div class="panel-grid">
    <div class="section">
      <h1>Разумный подход</h1>
      <p><a href="http://podhod.ru">podhod.ru</a></p>
    </div>
  </div>
  <div class="panel-grid">
    <div class="section">
      <h1>Разумный подход</h1>
      <p><a href="http://podhod.ru">podhod.ru</a></p>
    </div>
  </div>
  <div class="panel-grid">
    <div class="section">
      <h1>Разумный подход</h1>
      <p><a href="http://podhod.ru">podhod.ru</a></p>
    </div>
  </div>
  <div class="panel-grid">
    <div class="section">
      <h1>Разумный подход</h1>
      <p><a href="http://podhod.ru">podhod.ru</a></p>
    </div>
  </div>
  <div class="panel-grid">
    <div class="section">
      <h1>Разумный подход</h1>
      <p><a href="http://podhod.ru">podhod.ru</a></p>
    </div>
  </div>
  <div class="panel-grid">
    <div class="section">
      <h1>Разумный подход</h1>
      <p><a href="http://podhod.ru">podhod.ru</a></p>
    </div>
  </div>
  <div class="panel-grid">
    <div class="section">
      <h1>Разумный подход</h1>
      <p><a href="http://podhod.ru">podhod.ru</a></p>
    </div>
  </div>
  <div class="panel-grid">
    <div class="section">
      <h1>Разумный подход</h1>
      <p><a href="http://podhod.ru">podhod.ru</a></p>
    </div>
  </div>
  <div...

CSS

html {
  background: white;
  font-family: sans-serif;
}

.container.flexy {
  display: flex;
}


/* Blocks */

.block {
  width: 100px;
  height: 100px;
  margin: 0 10px 10px 0;
  background: #0077ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.slide-up {
  animation: slide-up 1s ease forwards;
}

.slide-up:nth-of-type(odd),
.slide-up-start.already-visible:nth-of-type(odd) {
  animation-duration: 1.3s;
}

.slide-up:nth-of-type(3n+1),
.slide-up-start.already-visible:nth-of-type(3n+1) {
  animation-duration: 1.9s;
}

.slide-up:nth-of-type(4n+3),
.slide-up-start.already-visible:nth-of-type(4n+3) {
  animation-duration: 1.6s;
}

.slide-up:nth-of-type(5n+2),
.slide-up-start.already-visible:nth-of-type(5n+2) {
  animation-duration: 2.2s;
}

.already-visible {
  transform: translateY(0);
  animation: none;
  opacity: 1;
}

.slide-up-start {
  animation: slide-up 1.5s ease forwards;
}

@keyframes slide-up {
  0% {
    transform: translateY(10%);
    opacity: 0;
  }
  40% {
    transform: translateY(10%);
    opacity: 0;
  }
  70% {
    transform: translateY(-1%);
    opacity: 1;
  }
  100% {
    transform: translateY(0%);
  }
}


/* Levels */

.section {
  margin: 0 50px
}

.container {
  display: block;
  width: 100%;
  overflow: hidden;
}

.container .panel-grid {
  background: white;
}

.container .panel-grid:nth-child(odd) {
  background: #0077ff;
}

.container .panel-grid:nth-child(3n+1) {
  background: #ff7700;
}

.container .panel-grid:nth-child(4n+3) {
  background: #7700ff;
}

.container .panel-grid:nth-child(5n+2) {
  background: #00ff77;
}

.container .panel-grid:nth-child(odd) {
  transform: rotate(3deg);
  margin-top: -150px !important;
}

.container .panel-grid:nth-child(even) {
  transform: rotate(-3deg);
}

.container .panel-grid:nth-child(odd)>div {
  transform: rotate(-3deg);
}

.container .panel-grid:nth-child(even)>div {
  transform: rotate(3deg);
}

.container .panel-grid>div {
  padding: 40px 0...

JavaScript

$(document).ready(function() {

  $.fn.visible = function(partial) {
    var $t = $(this),
      $win = $(window),
      viewTop = $win.scrollTop(),
      viewBottom = viewTop + $win.height(),
      offsetTop = $t.offset().top,
      offsetBottom = offsetTop + $t.height(),
      compareTop = partial === true ? offsetBottom : offsetTop,
      compareBottom = partial === true ? offsetTop : offsetBottom;
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
  };


  var win = $(window);
  var allContainers = $('.panel-block').add(".panel-grid");

  allContainers.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("already-visible");
    } else {
      el.removeClass("slide-up-start");
    }
  });

  win.scroll(function(event) {
    allContainers.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("slide-up");
      }
    });
  });

});