Реалізація паралакс-ефектів при скролі на сайті

Паралакс — різна швидкість руху шарів при скролі, що створює ілюзію глибини. На практиці часто стикаємося з гальмами: на iOS анімація смикається, на слабких пристроях FPS падає до 15. Ми вирішуємо цю проблему — використовуємо сучасні методи з урахуванням Core Web Vitals і доступності. Наша команда з 5-річним досвідом і 50+ проектами з паралаксом гарантує плавну анімацію на будь-яких пристроях, скорочуючи час розробки на 40% порівняно з саморобними рішеннями. Вартість розраховується індивідуально, залежно від складності та кількості шарів.

Як паралакс впливає на Core Web Vitals?

Паралакс безпосередньо впливає на метрики LCP і CLS. Якщо реалізація неоптимальна, браузер змушений перемальовувати великі області, збільшуючи час завантаження та зсуви макету. За даними web.dev, неправильне використання will-change може призвести до втрати FPS. Грамотна оптимізація паралаксу дозволяє скоротити бюджет на анімацію на 30% і покращити LCP на 0.5 с.

Як вибрати метод паралаксу для конкретної задачі?

Паралакс реалізується трьома способами: CSS (background-attachment: fixed) — обмежено, JavaScript (requestAnimationFrame) — універсально, або GSAP ScrollTrigger scrub — максимально гладко. Щоб зрозуміти різницю, розглянемо порівняння:

GSAP ScrollTrigger scrub — рекомендований підхід. Він дає плавність у 3–5 разів краще саморобних рішень на слабких пристроях за рахунок вбудованого керування requestAnimationFrame і scrub.

Чому GSAP кращий за саморобні рішення?

GSAP обробляє паралакс через scrub — прив'язує анімацію до позиції скролу з опціональним згладжуванням. Вбудований плагін ScrollTrigger вирішує проблеми синхронізації та продуктивності. Приклад реалізації:

// components/ParallaxSection.tsx import { useEffect, useRef } from 'react' import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) export function ParallaxSection() { const sectionRef = useRef<HTMLDivElement>(null) useEffect(() => { const ctx = gsap.context(() => { // Слой 1: медленный фон gsap.to('.bg-layer', { yPercent: -20, ease: 'none', scrollTrigger: { trigger: sectionRef.current, start: 'top bottom', end: 'bottom top', scrub: true, }, }) // Слой 2: средний план gsap.to('.mid-layer', { yPercent: -40, ease: 'none', scrollTrigger: { trigger: sectionRef.current, start: 'top bottom', end: 'bottom top', scrub: 1.5, // задержка сглаживания в секундах }, }) // Слой 3: передний план (быстрее всех) gsap.to('.fg-layer', { yPercent: -60, ease: 'none', scrollTrigger: { trigger: sectionRef.current, start: 'top bottom', end: 'bottom top', scrub: 2, }, }) // Горизонтальный параллакс для декоративных элементов gsap.to('.float-left', { x: -50, ease: 'none', scrollTrigger: { trigger: sectionRef.current, start: 'top bottom', end: 'bottom top', scrub: true, }, }) gsap.to('.float-right', { x: 50, ease: 'none', scrollTrigger: { trigger: sectionRef.current, start: 'top bottom', end: 'bottom top', scrub: true, }, }) }, sectionRef) return () => ctx.revert() }, []) return ( <div ref={sectionRef} className="relative h-screen overflow-hidden"> <div className="bg-layer absolute inset-0 bg-cover bg-center" style={{ backgroundImage: "url('/bg-mountains.jpg')", height: '120%', top: '-10%' }} /> <div className="mid-layer absolute inset-0 flex items-center justify-center"> <h2 className="text-6xl font-bold text-white">Заголовок</h2> </div> <div className="fg-layer absolute bottom-0 w-full"> <svg viewBox="0 0 1440 200">{/* облака, деревья */}</svg> </div> </div> ) } 

Порівняння продуктивності на мобільних пристроях

GSAP ScrollTrigger показує найкращі результати завдяки використанню will-change та автоматичному керуванню requestAnimationFrame.

Як реалізувати паралакс на чистому JavaScript?

Якщо проєкт не використовує GSAP, є перевірений підхід на чистому JS з requestAnimationFrame. Головне — дотримуватися правил: читати scrollY тільки в scroll-події (пасивній), писати в DOM через requestAnimationFrame, використовувати transform замість top/left і will-change: transform. Ось робочий хук для React:

// hooks/useParallax.ts import { useEffect, useRef, useState } from 'react' interface ParallaxOptions { speed?: number // 0 = не двигається, 1 = разом зі скролом, -1 = назад direction?: 'vertical' | 'horizontal' disabled?: boolean // для мобільних } export function useParallax({ speed = 0.5, direction = 'vertical', disabled = false, }: ParallaxOptions = {}) { const elementRef = useRef<HTMLElement>(null) const rafRef = useRef<number | null>(null) const lastScrollY = useRef(0) useEffect(() => { if (disabled || !elementRef.current) return const el = elementRef.current el.style.willChange = 'transform' let ticking = false const updateTransform = () => { const rect = el.getBoundingClientRect() const viewportCenter = window.innerHeight / 2 const elementCenter = rect.top + rect.height / 2 const distanceFromCenter = elementCenter - viewportCenter const offset = -distanceFromCenter * (speed - 1) if (direction === 'vertical') { el.style.transform = `translateY(${offset}px)` } else { el.style.transform = `translateX(${offset}px)` } ticking = false } const onScroll = () => { if (!ticking) { rafRef.current = requestAnimationFrame(updateTransform) ticking = true } } window.addEventListener('scroll', onScroll, { passive: true }) updateTransform() // начальное положение return () => { window.removeEventListener('scroll', onScroll) if (rafRef.current) cancelAnimationFrame(rafRef.current) el.style.willChange = '' el.style.transform = '' } }, [speed, direction, disabled]) return elementRef } 

// components/ParallaxImage.tsx import { useParallax } from '../hooks/useParallax' interface ParallaxImageProps { src: string alt: string speed?: number className?: string } export function ParallaxImage({ src, alt, speed = 0.6, className }: ParallaxImageProps) { // Відключаємо паралакс на мобільних — економимо ресурси const isMobile = typeof window !== 'undefined' ? window.matchMedia('(max-width: 768px)').matches : false const ref = useParallax({ speed, disabled: isMobile }) return ( <div className="overflow-hidden"> <img ref={ref as React.RefObject<HTMLImageElement>} src={src} alt={alt} className={className} // Трішки збільшуємо зображення, щоб приховати краї при паралаксі style={{ transform: 'scale(1.1)', transformOrigin: 'center' }} /> </div> ) } 

Навіщо враховувати prefers-reduced-motion?

Користувачі з вестибулярними розладами можуть відчувати дискомфорт від анімації. Додайте підтримку prefers-reduced-motion, щоб вимикати паралакс для таких випадків. Приклад хука:

// hooks/useReducedMotion.ts import { useEffect, useState } from 'react' export function useReducedMotion(): boolean { const [reducedMotion, setReducedMotion] = useState(false) useEffect(() => { const mq = window.matchMedia('(prefers-reduced-motion: reduce)') setReducedMotion(mq.matches) const handler = (e: MediaQueryListEvent) => setReducedMotion(e.matches) mq.addEventListener('change', handler) return () => mq.removeEventListener('change', handler) }, []) return reducedMotion } 

Типові помилки при реалізації паралаксу:

• Використання scroll-події без requestAnimationFrame — призводить до дропів кадрів.
• Застосування background-attachment: fixed на iOS — не працює, потрібен JS.
• Відсутність fallback для слабких пристроїв — мобільні гріються та гальмують.
• Ігнорування prefers-reduced-motion — порушення доступності.

Ми уникаємо цих помилок завдяки чек-листу з 20 пунктів та регресійним тестам на реальних пристроях.

Що входить у роботу

• Аналіз макетів і вибір стратегії паралаксу (CSS/JS/GSAP)
• Розробка кастомних React-компонентів з оптимізацією продуктивності
• Тестування на iOS, Android, десктоп-браузерах
• Інтеграція prefers-reduced-motion для доступності
• Документація коду та передача доступів
• Підтримка протягом 3 місяців після здачі

Зв'яжіться з нами для обговорення деталей.

Процес роботи

1. Аналітика — визначаємо цілі та технічні обмеження проекту
2. Проектування — вибираємо стек (React + GSAP або кастомний хук)
3. Реалізація — код з коментарями та модульними тестами
4. Тестування — перевірка на iOS/Android/Chrome/Firefox/Safari
5. Деплой — розміщення на вашому хостингу або Vercel

Терміни: від 2 до 5 робочих днів залежно від складності. Зв'яжіться з нами для безкоштовної оцінки вашого проекту. Замовте паралакс для вашого сайту — отримайте консультацію інженера.

Рекомендуємо звіритися з документацією MDN: will-change для GPU-прискорення.