Параллакс эффекты

Параллакс эффект — это визуальный приём, при котором элементы страницы движутся с разной скоростью при прокрутке, создавая ощущение глубины и динамики. В современном веб-дизайне параллакс широко используется для лендингов, портфолио и интерактивных страниц. Библиотека Smooth Scroll в сочетании с чистым JavaScript позволяет реализовать плавный скролл и управлять положением элементов, создавая эффект параллакса.

Настройка Smooth Scroll для параллакса

Для начала необходимо подключить библиотеку Smooth Scroll и инициализировать её на странице:

const scroll = new SmoothScroll({
    speed: 800,
    easing: 'easeInOutCubic',
    offset: 0,
});
  • speed — скорость анимации прокрутки в миллисекундах.
  • easing — функция сглаживания, отвечающая за динамику движения.
  • offset — смещение для учета фиксированных элементов, например, шапки сайта.

Инициализация Smooth Scroll создаёт базовую основу для управления скроллом, после чего можно добавить управление позиционированием элементов.

Принципы параллакс анимации

Эффект параллакса реализуется через динамическое изменение CSS-свойств элементов в зависимости от текущей позиции скролла. Основные приёмы:

  1. Сдвиг элементов по оси Y Для элементов с классом .parallax:
const parallaxElements = document.querySelectorAll('.parallax');

window.addEventListener('scroll', () => {
    const scrollTop = window.pageYOffset;

    parallaxElements.forEach(el => {
        const speed = el.getAttribute('data-speed');
        el.style.transform = `translateY(${scrollTop * speed}px)`;
    });
});
  • data-speed задаёт скорость движения элемента относительно скролла.
  • Значение меньше 1 создаёт эффект «медленного» движения на фоне, больше 1 — «быстрого» переднего плана.
  1. Изменение прозрачности (fade) Элемент может постепенно появляться или исчезать:
el.style.opacity = 1 - scrollTop / (window.innerHeight * 2);
  1. Масштабирование (scale) Для создания глубины можно изменять размер элементов:
el.style.transform = `scale(${1 + scrollTop / 2000})`;

Эти подходы могут комбинироваться для более сложного и впечатляющего эффекта.

Использование Smooth Scroll для якорей с параллаксом

Smooth Scroll позволяет плавно прокручивать страницу к нужному элементу. При этом можно сочетать прокрутку с параллакс-анимацией:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        scroll.animateScroll(document.querySelector(this.getAttribute('href')));
    });
});

Параллакс-эффекты при этом будут корректно работать, так как Smooth Scroll изменяет window.pageYOffset, на который подписаны обработчики анимации.

Продвинутые техники

  1. Динамическая скорость элементов Можно задавать разные скорости в зависимости от позиции элемента на экране:
const rect = el.getBoundingClientRect();
const speed = 0.5 + rect.top / window.innerHeight * 0.5;
el.style.transform = `translateY(${scrollTop * speed}px)`;
  1. Использование requestAnimationFrame для оптимизации Для плавной анимации и уменьшения нагрузки на CPU:
let ticking = false;

window.addEventListener('scroll', () => {
    if (!ticking) {
        window.requestAnimationFrame(() => {
            updateParallax();
            ticking = false;
        });
        ticking = true;
    }
});

function updateParallax() {
    const scrollTop = window.pageYOffset;
    parallaxElements.forEach(el => {
        const speed = el.getAttribute('data-speed');
        el.style.transform = `translateY(${scrollTop * speed}px)`;
    });
}
  1. Комбинация с горизонтальным скроллом Для более сложных макетов можно использовать параллакс по оси X:
el.style.transform = `translate(${scrollTop * speedX}px, ${scrollTop * speedY}px)`;

Оптимизация производительности

  • Использовать CSS-свойство will-change: transform; для элементов, участвующих в анимации.
  • Минимизировать количество элементов с параллаксом на странице.
  • Ограничивать расчёт getBoundingClientRect() только когда это необходимо.
  • Объединять анимации в один обработчик requestAnimationFrame для снижения количества перерисовок.

Интеграция с другими библиотеками

Smooth Scroll легко сочетается с GSAP, ScrollMagic и другими инструментами для более сложных параллакс-сценариев, позволяя управлять кривыми анимации, событиями триггеров и синхронизацией с другими эффектами.

Параллакс с Smooth Scroll обеспечивает плавную и управляемую анимацию, минимизируя рывки и создавая ощущение глубины, что особенно важно для современных динамичных интерфейсов.

Оглавление