Анимация появления элементов при скролле

<style>
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
</style>

<div class="fade-in">Этот блок появится с анимацией</div>
<div class="fade-in" style="margin-top: 50px;">И этот тоже!</div>

<script>
$(window).scroll(function() {
  $('.fade-in').each(function() {
  var position = $(this).offset().top;
  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();

  if (position < scrollTop + windowHeight - 100) {
  $(this).addClass('visible');
  }
  });
});

// Инициализация при загрузке
$(document).ready(function() {
  $(window).trigger('scroll');
});
</script>