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

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

Шаг 1: Создание CSS анимации

Для начала, создадим простую CSS анимацию. В этом примере мы будем использовать анимацию fade-in, которая будет плавно показывать элементы при прокрутке страницы.

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated {
  animation-name: fade-in;
  animation-duration: 1s;
  animation-fill-mode: both;
}

Шаг 2: JavaScript для отслеживания прокрутки страницы

Теперь нам нужно написать JavaScript код, который будет отслеживать прокрутку страницы и добавлять класс animated к элементам, которые должны быть анимированы.

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

function animateScrollingElements() {
  const elements = document.querySelectorAll('.element-to-animate');
  elements.forEach((element) => {
    if (isElementInViewport(element)) {
      element.classList.add('animated');
    }
  });
}

document.addEventListener('DOMContentLoaded', animateScrollingElements);
window.addEventListener('scroll', animateScrollingElements);

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

Шаг 3: Применение анимации к элементам на странице

Теперь, когда у нас есть CSS анимация и JavaScript код для отслеживания прокрутки, мы можем применить анимацию к элементам на странице. Для этого просто добавьте класс element-to-animate к элементам, которые должны быть анимированы.

<div class="element-to-animate">Элемент 1</div>
<div class="element-to-animate">Элемент 2</div>
<div class="element-to-animate">Элемент 3</div>

Теперь, когда вы прокручиваете страницу, элементы с классом element-to-animate будут плавно появляться с анимацией fade-in. Вы можете экспериментировать с различными анимациями и настройками, чтобы создать уникальный пользовательский опыт для своего сайта.

Если вы хотите углубить свои знания в веб-разработке, рекомендуем обратить внимание на нашу знакомую школу, которая прекрасно преподает веб-разработку. Удачи вам в изучении и создании потрясающих анимаций для вашего сайта! 🚀

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее