Плавное "выезжание" блока при скролле страницы

block_slidedown.js

$(document).ready(function (){
  $('.for-slidedown').addClass('slidedown-ready')
  $(window).on('scroll', function (event) {
      $('.for-slidedown.slidedown-ready').each(function () {
          if (window.innerHeight + window.pageYOffset >= $(this).offset().top) {
              $(this).removeClass('slidedown-ready');
          }
      });
  });
});

style.css

/*Навесить класс `for-slidedown` на элементы, к которым следует применить эффект*/
.for-slidedown {
  transition: all 1s ease;
  transform: translateY(-0px);
  opacity: 1;
}

.slidedown-ready {
  transform: translateY(-30px);
  opacity: 0.2;
}