JavaScript: Плавное появление блоков

Плавное появление блоков при пролистывание страницы вниз.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <style>

    #cont {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      max-width: 700px;
      margin-bottom: 250px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    #btn {
      position: fixed;
      right: 15px;
      bottom: 15px;
      height: 50px;
      width: 50px;
    }

    .block {
      padding: 15px;
      margin: 15px;
    }

    .block img {
      width: 100%;
    }

    .info {
      overflow: hidden;
      background: #fafafa;
      padding: 15px;
      margin-bottom: 20px;
    }

    /***/

    .chat {
      list-style: none;
      margin: 0;
      padding: 10px;
    }

    .chat li {
      margin-bottom: 20px;
      padding-bottom: 20px;
    }

    .chat li img {
      margin: 10px 0;
    }

    .chat li.left .chat-body {
      margin-left: 60px;
    }

    .chat li.right .chat-body {
      margin-right: 60px;
    }

    .chat li.left .chat-body p {
      margin: 0;
      color: #ffffff;
      width: 100%;
      overflow: auto;
      border: 1px solid #1f5761;
      padding: 15px;
      background: #2f8492;
      text-align: left;
    }

    .chat li.right .chat-body p {
      margin: 0;
      color: #ffffff;
      width: 100%;
      overflow: auto;
      border: 1px solid #1f5761;
      padding: 15px;
      background: #3a9239;
      text-align: right;
    }

    .panel .slidedown .glyphicon, .chat .glyphicon {
      margin-right: 5px;
    }

    .panel-body {
      overflow-y: scroll;
      height: 250px;
    }

    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #F5F5F5;
    }

    ::-webkit-scrollbar {
      width: 12px;
      background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: #555;
    }

  </style>
</head>

<body>

<div id="cont" class="chat">

  <div class="info">
    <h1>Чижик-Пыжик</h1>
    <p>Для старта нужно пролистат вниз.</p>
  </div>

</div>


<button hidden id="btn" onclick="next()">Next</button>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>

  $(document).ready(function () {
    $('html').animate({scrollTop: 0}, 1);
    $('body').animate({scrollTop: 0}, 1);

    (function () {
      var timer;

      $(window).bind('scroll', function () {

        var st = $(this).scrollTop();

        if (st > lastScrollTop) {
          clearTimeout(timer);
          timer = setTimeout(refresh, 150);
        } else {

        }
        lastScrollTop = st;

      });

      var refresh = function () {
        next();
      };

    })();
  });

  var i = 0;
  var height = $(document).height();
  var height_info = $(document).height() - 200;

  // console.log(to);

  $("head").append('<style type="text/css"></style>');

  var newStyleElement = $("head").children(':last');

  newStyleElement.html('.info{ min-height:' + height_info + 'px; }');

  var allText = [
    'voice_mes',
    'Василий',
    'Чижику',
    '21.08 - 22.20',
    'https://www.soundjay.com/free-music/destination-01.mp3',
    'mes',
    'Василий',
    'Чижику',
    '21.08 - 22.00',
    'Чижик-Пыжик, где ты был?',
    'mes',
    'Чижик',
    'Василию',
    '21.08 - 22.01',
    'На Фонтанке водку пил',
    'mes',
    'Чижик',
    'Василию',
    '21.08 - 22.02',
    'Выпил рюмку, выпил две, закружилось в голове',
    'post',
    'Чижик',
    '21.08 - 22.02',
    'https://i.ytimg.com/vi/_ALC6PB4l0Y/maxresdefault.jpg',
    'Вот как бы так #чижик #водка #рюмка #две',
    'voice_mes',
    'Василий',
    'Чижику',
    '21.08 - 22.20',
    'https://www.soundjay.com/free-music/destination-01.mp3',
    'mes',
    'Василий',
    'Чижику',
    '21.08 - 22.00',
    'Чижик-Пыжик, где ты был?',
    'mes',
    'Чижик',
    'Василию',
    '21.08 - 22.01',
    'На Фонтанке водку пил',
    'mes',
    'Чижик',
    'Василию',
    '21.08 - 22.02',
    'Выпил рюмку, выпил две, закружилось в голове',
    'post',
    'Чижик',
    '21.08 - 22.02',
    'https://i.ytimg.com/vi/_ALC6PB4l0Y/maxresdefault.jpg',
    'Вот как бы так #чижик #водка #рюмка #две',
    'mes',
    'Василий',
    'Чижику',
    '21.08 - 22.20',
    'Все понятно',];


  function left_mes(name_from, name_to, date, text) {
    return '<li hidden id="block' + i + '" class="left mes"><span class="chat-img pull-left">' +
      '<img src="http://placehold.it/50/55C1E7/fff&amp;text=U" alt="User Avatar" class="img-circle"> </span> ' +
      '<div class="chat-body mes">' +
      '<div class="header"><strong class="primary-font">' + name_from + '</strong> ' +
      '<small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>' + date + '</small> </div> ' +
      '<p>' + text + '</p> </div> </li>'
  }

  function right_mes(name_from, name_to, date, text) {
    return '<li hidden id="block' + i + '" class="right mes"><span class="chat-img pull-right"> ' +
      '<img src="http://placehold.it/50/FA6F57/fff&amp;text=ME" alt="User Avatar" class="img-circle"> </span> ' +
      '<div class="chat-body mes"> <div class="header"> ' +
      '<strong class="pull-right primary-font">' + name_from + '</strong> </div> ' +
      '<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>' + date + '</small> ' +
      '<p>' + text + '</p> </div> </li>'
  }

  function post_img(name_from, date, img, text) {

    return '<div><span class="chat-img pull-right">' +
      '<img src="http://placehold.it/50/FA6F57/fff&amp;text=ME" alt="User Avatar" class="img-circle"></span>' +
      '<div class="chat-body mes"><div class="header">' +
      '<strong class="pull-right primary-font">' + name_from +
      '</strong></div> ' +
      '<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>' + date +
      ' </small>  ' +
      ' <li hidden id="block' + i + '" class="block"><img src="' + img +
      '"> <p>' + text + '</p> </li></div></div>';

  }

  function left_voice_mes(id, name_from, name_to, date, text) {
    return '<li hidden id="block' + i + '" class="left mes"><span class="chat-img pull-left">' +
      '<img src="http://placehold.it/50/55C1E7/fff&amp;text=U" alt="User Avatar" class="img-circle"> </span> ' +
      '<div class="chat-body mes">' +
      '<div class="header"><strong class="primary-font">' + name_from + '</strong> ' +
      '<small class="pull-right text-muted"> <span class="glyphicon glyphicon-time"></span>' + date + '</small> </div> ' +
      '<p><span id="audio' + id + '" onclick="playAudio(' + id + ',\'' + text + '\')" class="glyphicon glyphicon-play" aria-hidden="true"></span> Воспроизвести </p></div></li>'

  }
  function right_voice_mes(id, name_from, name_to, date, text) {
    return '<li hidden id="block' + i + '" class="right mes"><span class="chat-img pull-right"> ' +
      '<img src="http://placehold.it/50/FA6F57/fff&amp;text=ME" alt="User Avatar" class="img-circle"> </span> ' +
      '<div class="chat-body mes"> <div class="header"> ' +
      '<strong class="pull-right primary-font">' + name_from + '</strong> </div> ' +
      '<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>' + date + '</small> ' +
      '<p><span id="audio' + id + '" onclick="playAudio(' + id + ',\'' + text + '\')" class="glyphicon glyphicon-play" aria-hidden="true"></span> Воспроизвести </p></div></li>'
  }

  function next() {

    if (i < allText.length) {

      if (allText[i] == 'mes') {
        if (allText[i + 1][0] == 'Ч')
          $('#cont').append(right_mes(allText[i + 1], allText[i + 2], allText[i + 3], allText[i + 4]));
        else
          $('#cont').append(left_mes(allText[i + 1], allText[i + 2], allText[i + 3], allText[i + 4]));

        $('#block' + i).show('fast');

        i = i + 5;
      } else if (allText[i] == 'voice_mes') {
        if (allText[i + 1][0] == 'Ч')
          $('#cont').append(right_voice_mes(i, allText[i + 1], allText[i + 2], allText[i + 3], allText[i + 4]));
        else
          $('#cont').append(left_voice_mes(i, allText[i + 1], allText[i + 2], allText[i + 3], allText[i + 4]));

        $('#block' + i).show('fast');

        i = i + 5;
      } else if (allText[i] == 'post') {
        $('#cont').append(post_img(allText[i + 1], allText[i + 2], allText[i + 3], allText[i + 4]));
        $('#block' + i).show('fast');

        i = i + 5;
      } else {
        //error
        console.log(allText[i]);

        console.log("error at " + i + ' :' + allText[i]);
        i++;
      }


    }
  }

  var lastScrollTop = 0;

  var audio = new Audio('https://www.soundjay.com/button/button-1.mp3');

  var audioIsPlayng = false;

  function playAudio(id, url) {

    if ($('#audio' + id).hasClass('glyphicon-play')) {
      $('#audio' + id).removeClass('glyphicon-play');
      $('#audio' + id).addClass('glyphicon-stop');
      audio = new Audio(url);
      audio.play();

    } else {
      $('#audio' + id).addClass('glyphicon-play');
      $('#audio' + id).removeClass('glyphicon-stop');
      audio.pause();

    }

  }

</script>
</html>
Скачать пример