Как сделать анимацию раскрытия элементов от прокрутки сайта?

Для создания анимации раскрытия элементов при прокрутке сайта вам потребуется использовать JavaScript и CSS. Ниже представлен подробный шаг за шагом алгоритм, который поможет вам реализовать данную анимацию.

Шаг 1: Выбор элементов для анимации
Первым шагом является выбор элементов, которые вы хотите анимировать при прокрутке страницы. Обычно это может быть любой элемент, который вы хотите сделать видимым при достижении определенного уровня страницы.

Шаг 2: Добавление класса CSS для анимации
Следующим шагом является добавление класса CSS к выбранным элементам, чтобы инициировать анимацию при прокрутке страницы. В этом классе вы можете задать анимацию с помощью свойства CSS transition или animation.

Пример CSS анимации:

.anim {
  opacity: 0; /* Скрытый по умолчанию */
  transform: translateY(20px); /* Смещение вниз на 20px */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Плавное появление и смещение на 0.5 секунды */
}

Шаг 3: Добавление события прокрутки
Далее вам потребуется добавить обработчик события прокрутки, чтобы определить, когда элементы должны начать анимацию раскрытия. В этом обработчике вы будете проверять, прокручена ли страница до определенного уровня, и при выполнении условия добавлять класс анимации к элементам.

Пример кода JavaScript для обработчика события прокрутки:

window.addEventListener('scroll', function() {
  var elements = document.querySelectorAll('.anim'); // Выбор элементов с классом .anim

  elements.forEach(function(element) {
    var elementPosition = element.getBoundingClientRect().top;
    var screenHeight = window.innerHeight;

    if (elementPosition < screenHeight) {
      element.classList.add('anim'); // Добавление класса анимации
    }
  });
});

Шаг 4: Добавление стилей для окончания анимации
Последним шагом является добавление стилей CSS для окончания анимации. Вы можете задать этот стиль в классе CSS, который добавляется в шаге 3, или создать отдельный класс, который будет применяться после анимации.

Пример CSS стилей для окончания анимации:

.anim.anim-done {
  opacity: 1; /* Появление элемента */
  transform: translateY(0); /* Отмена смещения */
}

Теперь, когда вы проскроллируете страницу на уровень, где находятся выбранные элементы, они начнут анимацию раскрытия благодаря добавленным классам.