Анимация при прокрутке страницы может существенно улучшить пользовательский опыт, делая ваш сайт более интересным и привлекательным. В этой статье мы рассмотрим, как добавить анимацию при прокрутке страницы с помощью 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. Вы можете экспериментировать с различными анимациями и настройками, чтобы создать уникальный пользовательский опыт для своего сайта.
Если вы хотите углубить свои знания в веб-разработке, рекомендуем обратить внимание на нашу знакомую школу, которая прекрасно преподает веб-разработку. Удачи вам в изучении и создании потрясающих анимаций для вашего сайта! 🚀
Добавить комментарий