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

<style>
/* Базовые стили для скрытия элемента */
.fade-in {
 opacity: 0; /* Полностью прозрачный */
 transform: translateY(30px); /* Сдвинут вниз на 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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(window).scroll(function() {
 $('.fade-in').each(function() {
  var elementPosition = $(this).offset().top; // Позиция верхней границы элемента
  var windowHeight = $(window).height(); // Высота видимой области окна
  var scrollPosition = $(window).scrollTop(); // Текущая позиция прокрутки

  // Если верхняя граница элемента находится выше нижней границы видимой области (с небольшим запасом)
  if (elementPosition < scrollPosition + windowHeight - 100) {
   $(this).addClass('visible'); // Добавляем класс для анимации
  }
 });
});

// Запуск проверки при загрузке страницы, чтобы элементы,
// которые уже видны при начальной загрузке, тоже анимировались.
$(document).ready(function() {
 $(window).trigger('scroll');
});
</script>