<script src="https://lib.amic.ru/js/waypoints/jquery.waypoints.min.js" defer></script>
<script src="https://lib.amic.ru/js/waypoints/shortcuts/inview.min.js" defer></script>
<ul class="notifications"></ul>
<div class="notifi"></div>
<script>
jQuery(function($){
$notifications = $('.notifications');
$.each( $('.InviewElement'), function (){
 new Waypoint.Inview({
  element: this,
  enter: function(direction) {
    notify($(this.element).text())
  }
})
})
})

  function notify(text) {
    var $notification = $('<li />').text(text).css({
      left: 320, color: '#eeeeee'
    })
    $notifications.append($notification)

    $notification.animate({
      left: 0
    }, 300, function() {
      $(this).delay(3000).animate({
        left: 320
      }, 200, function() {
        $(this).slideUp(300, function() {
          $(this).remove()
        })
      })
    })
  }
</script>
